/* ============================================================
   Church Treasury — refined institutional UI
   Display: Fraunces · Body: Public Sans · Figures: IBM Plex Mono
   Palette: forest green + brass on parchment
   ============================================================ */
:root{
  --font-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Fraunces",Georgia,serif;
  --ink:#1b2420;
  --ink-soft:#3f4f48;
  --muted:#677770;
  --parchment:#f4f1e8;
  --paper:#fffdf8;
  --paper-2:#fbf8f1;
  --line:#e6e0d2;
  --line-strong:#d3cbb6;
  --forest:#1f5f4f;
  --forest-2:#24705d;
  --forest-deep:#143a31;
  --forest-soft:#e7f0eb;
  --forest-tint:#f0f6f2;
  --brass:#b07d2c;
  --brass-2:#c79241;
  --brass-soft:#f5ead2;
  --danger:#a23b32;
  --danger-soft:#f7e6e3;
  --amber:#8a6013;
  --amber-soft:#f7ecd4;
  --blue:#2c5d86;--blue-soft:#e4eef6;
  --radius:12px; --radius-sm:9px; --radius-lg:18px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,33,28,.06);
  --shadow:0 1px 2px rgba(20,33,28,.05), 0 10px 26px -14px rgba(20,33,28,.20);
  --shadow-md:0 2px 6px rgba(20,33,28,.06), 0 18px 40px -18px rgba(20,33,28,.28);
  --shadow-lg:0 30px 60px -22px rgba(0,0,0,.40);
  --ring:0 0 0 3px rgba(31,95,79,.18);
  --t:.16s cubic-bezier(.4,0,.2,1);
  /* aliases used across templates */
  --accent:var(--forest);--accent-soft:var(--forest-soft);--card-head:#f1ece0;
  --green:var(--forest);--red:var(--danger);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body,"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  background:var(--parchment);
  background-image:radial-gradient(120% 80% at 100% -10%, #f8f5ee 0%, rgba(248,245,238,0) 55%),
                   radial-gradient(90% 70% at -10% 110%, #f1eee5 0%, rgba(241,238,229,0) 50%);
  color:var(--ink);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--forest);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--forest-deep)}
h1,h2,h3,h4{font-family:var(--font-display,"Fraunces",Georgia,serif);font-weight:600;color:var(--ink);
  letter-spacing:-.012em;line-height:1.14;margin:0 0 .4em}
h1{font-size:1.95rem}h2{font-size:1.4rem}h3{font-size:1.12rem}
.mono,.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
::selection{background:var(--forest-soft);color:var(--forest-deep)}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#bcb39b;background-clip:content-box}

/* ---------- App shell ---------- */
.shell{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar-bg,linear-gradient(180deg,#184337 0%, #143a31 55%, #11342b 100%));
  color:#dfeae4;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid rgba(0,0,0,.25);box-shadow:inset -1px 0 0 rgba(255,255,255,.03)}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);background-clip:content-box}
.brand{display:flex;align-items:center;gap:.7rem;padding:1.25rem 1.3rem;
  border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;
  background:var(--sidebar-brand,linear-gradient(180deg,#184337,#163f35));z-index:1}
.brand .mark{width:38px;height:38px;border-radius:11px;
  background:linear-gradient(145deg,var(--brass-2),var(--brass));
  display:grid;place-items:center;font-family:var(--font-display,"Fraunces",serif);font-weight:700;
  color:#231a09;font-size:1.2rem;flex:none;
  box-shadow:0 4px 12px -4px rgba(176,125,44,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.brand b{font-family:var(--font-display,"Fraunces",serif);font-size:1.06rem;color:#fff;display:block;line-height:1.12;
  letter-spacing:-.01em}
.brand span{font-size:.7rem;color:#9fb8ad;letter-spacing:.16em;text-transform:uppercase}
.nav{padding:.7rem .65rem 2.4rem}
.nav .group{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;
  color:#84a99a;padding:1rem .85rem .35rem;font-weight:700}
.nav a{display:flex;align-items:center;gap:.65rem;padding:.5rem .8rem;border-radius:9px;
  color:#cadbd2;font-size:.9rem;margin:1px 0;position:relative;transition:background var(--t),color var(--t)}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.active{background:linear-gradient(90deg,rgba(36,112,93,.95),rgba(31,95,79,.85));
  color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.nav a.active::before{content:"";position:absolute;left:-.65rem;top:50%;transform:translateY(-50%);
  width:3px;height:60%;border-radius:0 4px 4px 0;background:var(--brass-2)}
.nav a .ic{width:18px;text-align:center;opacity:.85;font-size:.95em}
.nav a.active .ic{opacity:1}
.nav a .badge{margin-left:auto;background:var(--brass);color:#231a09;font-size:.68rem;
  font-weight:700;border-radius:var(--radius-pill);padding:.05rem .45rem;min-width:18px;text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}

.main{min-width:0;display:flex;flex-direction:column;overflow-x:clip}
/* `clip` (not `auto`) deliberately: it contains horizontal overflow without
   creating a scroll container, so the sticky topbar and normal vertical page
   scrolling are untouched. Without this, one table wider than the content
   column widens the whole document; because the sidebar is sticky on `top`
   only, horizontal scrolling then slides the page underneath it. Wide tables
   scroll inside their own card instead (.table-wrap). */
.topbar{background:rgba(255,253,248,.82);backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);padding:.7rem 1.8rem;
  display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:20;
  box-shadow:0 1px 0 rgba(20,33,28,.02),0 6px 18px -16px rgba(20,33,28,.25)}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.topbar .who .avatar{width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,var(--forest-2),var(--forest));color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.95rem;
  box-shadow:0 2px 8px -2px rgba(31,95,79,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.topbar .who-meta{display:flex;flex-direction:column;line-height:1.15}
.topbar .who-meta strong{font-size:.9rem;font-weight:600}
.topbar .who .role{font-size:.64rem;color:var(--forest-deep);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em}
.topbar .period{display:flex;align-items:center;gap:.5rem}
.content{padding:1.9rem;max-width:1240px;width:100%;animation:rise .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;position:relative;padding-bottom:.8rem;margin-bottom:1.2rem}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  border-top:2px solid var(--forest);border-bottom:1px solid var(--brass)}
.page-head h1{margin-bottom:.1rem}
.page-head .sub{color:var(--muted);font-size:.92rem;margin-top:.1em}

/* ---------- Cards / stats ---------- */
.grid{display:grid;gap:1rem}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;transition:box-shadow var(--t),border-color var(--t)}
.card .bd{padding:1.25rem 1.35rem}
.card .hd{padding:.85rem 1.35rem;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:.5rem;
  background:linear-gradient(180deg,var(--paper-2),var(--paper));
  font-family:var(--font-display,"Fraunces",serif);font-weight:600;font-size:1.02rem;color:var(--ink)}
.card .hd h3{margin:0}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.25rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform var(--t),box-shadow var(--t)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat .label,.stat .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.stat .value,.stat .val{font-family:"IBM Plex Mono",monospace;font-size:clamp(1.2rem,2.6vw,1.55rem);font-weight:600;
  margin-top:.3rem;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  line-height:1.15;overflow-wrap:anywhere;word-break:break-word}
.stat .value .ksh{font-size:.78rem;color:var(--muted);margin-right:.2rem;font-weight:600}
.stat .foot{font-size:.78rem;color:var(--ink-soft);margin-top:.35rem}
.stat.accent{border-top:3px solid var(--forest)}
.stat.brass{border-top:3px solid var(--brass)}
.stat.warn{border-top:3px solid var(--amber)}
a.stat-link{display:block;text-decoration:none;color:inherit}
a.stat-link:hover{text-decoration:none}

/* .panel — the lighter container beside .card.
   .card is a titled box (.hd/.bd) for a section of a screen; .panel is a single
   padded surface for one block of content, which is what the member portal,
   the supplier register and the benevolent screens are built from. It had been
   used in 27 templates without ever being defined, so every one of them was
   rendering as a bare <div>: no surface, no border, no radius. Defined here,
   once, from the same tokens as .card so the two cannot drift apart. */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.05rem 1.2rem;box-shadow:var(--shadow-sm)}
.panel>:first-child{margin-top:0}
.panel>:last-child{margin-bottom:0}
.panel>h2,.panel>h3{font-size:1.02rem;margin:0 0 .7rem}
.panel.flush{padding:0;overflow:hidden}
.panel.flush>table:is(.ledger,.table){border-radius:inherit}
/* accent rails — the meaning of the panel, not decoration */
.panel-forest{border-left:3px solid var(--forest)}
.panel-brass{border-left:3px solid var(--brass)}
.panel-amber{border-left:3px solid var(--amber)}
.panel-danger{border-left:3px solid var(--danger)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow)}
table:is(.ledger,.table){width:100%;border-collapse:collapse;font-size:.88rem}
table:is(.ledger,.table) th{text-align:left;padding:.7rem .9rem;
  background:var(--paper-2);position:sticky;top:0;z-index:1;
  border-bottom:1.5px solid var(--line-strong);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-soft);font-weight:700;white-space:nowrap}
table:is(.ledger,.table) td{padding:.62rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
table:is(.ledger,.table) tbody tr:nth-child(even){background:rgba(31,95,79,.018)}
table:is(.ledger,.table) tbody tr{transition:background .12s}
table:is(.ledger,.table) tbody tr:hover{background:var(--forest-tint)}
table:is(.ledger,.table) tr:last-child td{border-bottom:none}
table:is(.ledger,.table) td.num,table:is(.ledger,.table) th.num{text-align:right;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
table:is(.ledger,.table) tfoot td,table:is(.ledger,.table) tfoot th{font-weight:700;border-top:1.5px solid var(--line-strong);
  background:var(--paper-2);padding:.6rem .9rem}
table:is(.ledger,.table) tfoot th{text-align:left}table:is(.ledger,.table) tfoot th.num,table:is(.ledger,.table) tfoot td.num{text-align:right;font-family:"IBM Plex Mono",monospace}
table:is(.ledger,.table).plain{border:0}
table:is(.ledger,.table).plain td,table:is(.ledger,.table).plain th{border-bottom:1px solid var(--line)}
/* `.compact` is written on 92 tables across the app and had never been defined,
   so every one of them rendered at full padding. Matched to the figures the
   global density preference uses, so a compact table and a compact *site* agree. */
table:is(.ledger,.table).compact th{padding:.45rem .65rem}
table:is(.ledger,.table).compact td{padding:.36rem .65rem;font-size:.85rem}
.row-debit{color:var(--danger)}
.muted{color:var(--muted)}
.sticky-name{position:sticky;left:0;background:var(--paper)}
:is(.ledger,.table) tbody tr:hover .sticky-name{background:var(--forest-tint)}

/* ---------- Badges / pills ---------- */
.pill{display:inline-flex;align-items:center;gap:.32rem;font-size:.71rem;font-weight:700;
  padding:.18rem .6rem;border-radius:var(--radius-pill);letter-spacing:.01em;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.pill-green{background:var(--forest-soft);color:var(--forest-deep)}
.pill-brass{background:var(--brass-soft);color:var(--amber)}
.pill-amber{background:var(--amber-soft);color:var(--amber)}
.pill-red{background:var(--danger-soft);color:var(--danger)}
.pill-muted{background:var(--forest-tint);color:var(--muted)}
.pill-grey{background:#edeae0;color:var(--ink-soft)}
.pill-blue{background:var(--blue-soft);color:var(--blue)}
.pill-active{background:var(--forest);color:#fff}
a.pill{cursor:pointer;text-decoration:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font:inherit;font-size:.88rem;
  font-weight:600;padding:.55rem 1rem;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;color:#fff;transition:transform var(--t),box-shadow var(--t),background var(--t);
  background:linear-gradient(180deg,var(--forest-2),var(--forest));
  box-shadow:0 1px 2px rgba(20,33,28,.12),0 6px 16px -10px rgba(31,95,79,.7);line-height:1.1}
.btn:hover{background:linear-gradient(180deg,var(--forest),var(--forest-deep));
  text-decoration:none;transform:translateY(-1px);box-shadow:0 2px 4px rgba(20,33,28,.14),0 10px 22px -10px rgba(31,95,79,.8)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(20,33,28,.16)}
.btn:focus-visible{outline:none;box-shadow:var(--ring),0 6px 16px -10px rgba(31,95,79,.7)}
.btn-ghost{background:var(--paper);color:var(--forest);border-color:var(--line-strong);
  box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--forest-soft);color:var(--forest-deep);border-color:#bcd6c8}
.btn-brass{background:linear-gradient(180deg,var(--brass-2),var(--brass));color:#fff;
  box-shadow:0 1px 2px rgba(20,33,28,.12),0 6px 16px -10px rgba(176,125,44,.7)}
.btn-brass:hover{background:linear-gradient(180deg,var(--brass),#946718)}
.btn-danger{background:var(--paper);color:var(--danger);border-color:#e3cbc7;box-shadow:var(--shadow-sm)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-sm{padding:.34rem .65rem;font-size:.8rem;border-radius:8px}
.btn-xs{padding:.22rem .55rem;font-size:.74rem;border-radius:7px;
  background:linear-gradient(180deg,var(--forest-2),var(--forest));color:#fff;border:1px solid transparent;cursor:pointer;font-weight:600}
.btn-xs.btn-ghost{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line-strong)}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}

/* ---------- Forms ---------- */
.field,.field--select{width:100%;padding:.58rem .75rem;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font:inherit;font-size:.9rem;background:var(--paper);color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t)}
.field::placeholder{color:#a9b3ac}
.field:hover,.field--select:hover{border-color:#c0b89f}
.field:focus,.field--select:focus{outline:none;border-color:var(--forest);box-shadow:var(--ring)}
.field--select,select.field{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8a83' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .65rem center;padding-right:2rem}
textarea.field{min-height:64px;resize:vertical}
/* inline-in-a-table-row inputs (settling a payable, part-paying an accrual) */
.field-xs{width:auto;padding:.24rem .45rem;font-size:.8rem;border-radius:7px}
select.field-xs{padding-right:1.6rem;background-position:right .4rem center}
/* `.entry-grid` — the add-a-row form that sits under a register table.
   A responsive 6-track grid so a field can claim the width it needs instead of
   every field being forced to one narrow column. */
.entry-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem .6rem;align-items:start}
.entry-grid .span-2{grid-column:span 2}
.entry-grid .span-3{grid-column:span 3}
.entry-grid .entry-submit{grid-column:1/-1;display:flex;justify-content:flex-end;
  border-top:1px solid var(--line);padding-top:.7rem;margin-top:.1rem}
.entry-grid .hint{font-size:.74rem;color:var(--muted);margin-top:.25rem;line-height:1.35}
@media(max-width:1100px){.entry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){
  .entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entry-grid .span-2,.entry-grid .span-3{grid-column:span 2}
}
.form-row{margin-bottom:1rem}
.form-row label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:.3rem}
.form-row .help,.help{font-size:.78rem;color:var(--muted);margin-top:.3rem;line-height:1.45}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.errorlist{color:var(--danger);font-size:.8rem;list-style:none;padding:0;margin:.3rem 0 0}
.check-row{display:flex;align-items:center;gap:.5rem;font-size:.88rem}
.check-row input{width:auto;accent-color:var(--forest)}
input[type=checkbox],input[type=radio]{accent-color:var(--forest)}

/* ---------- Filters bar ---------- */
.filters{display:flex;gap:.65rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.2rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;
  box-shadow:var(--shadow-sm)}
.filters .f{display:flex;flex-direction:column;gap:.25rem}
.filters label{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.filters .field,.filters .field--select{padding:.42rem .6rem;font-size:.85rem;min-width:150px}

/* ---------- Messages ---------- */
.flash{padding:.75rem 1rem .75rem 1.05rem;border-radius:var(--radius-sm);margin-bottom:.7rem;font-size:.88rem;
  display:flex;gap:.55rem;align-items:center;border:1px solid;border-left-width:4px;box-shadow:var(--shadow-sm);
  animation:rise .25s ease both}
.flash::before{font-weight:700}
.flash.success{background:var(--forest-soft);border-color:#bcd6c8;border-left-color:var(--forest);color:var(--forest-deep)}
.flash.success::before{content:"✓"}
.flash.error{background:var(--danger-soft);border-color:#e3cbc7;border-left-color:var(--danger);color:var(--danger)}
.flash.error::before{content:"!"}
.flash.info,.flash.warning{background:var(--amber-soft);border-color:#e8d4a8;border-left-color:var(--amber);color:var(--amber)}
.flash.info::before,.flash.warning::before{content:"i"}

/* ---------- Misc ---------- */
.empty{text-align:center;padding:2.8rem 1rem;color:var(--muted)}
.empty .big{font-size:2.4rem;margin-bottom:.4rem;color:var(--line-strong);display:block}
.progress,.bar{height:9px;background:#e9e4d7;border-radius:var(--radius-pill);overflow:hidden}
.progress > span,.bar-fill{display:block;height:100%;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--forest-2),var(--forest))}
.progress.brass > span{background:linear-gradient(90deg,var(--brass-2),var(--brass))}
.pagination{display:flex;gap:.4rem;margin-top:1.3rem;align-items:center;font-size:.85rem}
.pagination a,.pagination span{padding:.38rem .72rem;border:1px solid var(--line-strong);
  border-radius:8px;background:var(--paper);transition:var(--t)}
.pagination a:hover{background:var(--forest-soft);border-color:#bcd6c8;text-decoration:none}
.pagination .current{background:var(--forest);color:#fff;border-color:var(--forest)}
.section-title,.sec,.section-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:700;margin:1.6rem 0 .7rem}
.split{display:flex;gap:1.5rem;flex-wrap:wrap}
.split > *{flex:1;min-width:280px}
.kv{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.kv:last-child{border-bottom:none}
.report-meta{font-size:.8rem;color:var(--muted);margin-bottom:1rem}
.print-head{display:none}
.link{color:var(--forest);font-weight:500}
.linkbtn{background:none;border:0;padding:0;color:var(--danger);font-weight:500;
  cursor:pointer;font-size:inherit;font-family:inherit}
.linkbtn:hover{text-decoration:underline}
tr.is-reversed td{opacity:.55}
tr.is-reversed s{color:var(--muted)}
.num.neg,td.neg{color:var(--danger)}
tr.subtotal td{border-top:1px solid var(--line);font-weight:600}
tr.is-danger td{background:var(--danger-soft)}
.link:hover{text-decoration:underline}
.link-danger{color:var(--danger);background:none;border:none;cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.link-danger:hover{opacity:.8}
.note{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:var(--radius-sm);padding:.75rem .95rem;font-size:.86rem;color:var(--ink-soft);line-height:1.5}
.info-panel{background:var(--forest-tint);border:1px solid #d7e6df;border-left:3px solid var(--forest);
  border-radius:var(--radius-sm);padding:.75rem 1rem;margin-bottom:1rem;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.role-key{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;color:var(--ink-soft);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem .95rem;margin-bottom:1rem}
.period-bar{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem .95rem;box-shadow:var(--shadow-sm)}
.period-bar .f{display:flex;flex-direction:column;gap:.2rem}
.period-bar label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.period-bar .field{width:auto}
.sign-row{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.6rem;font-size:.85rem;color:var(--ink-soft)}

/* ---------- Report cards / quick actions ---------- */
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.report-card{display:flex;flex-direction:column;gap:.3rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.15rem;
  box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t);position:relative;overflow:hidden}
.report-card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--forest),var(--brass));opacity:0;transition:opacity var(--t)}
.report-card:hover{border-color:#cfe0d8;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.report-card:hover::after{opacity:1}
.report-card .rc-ic{font-size:1.5rem;color:var(--brass);line-height:1}
.report-card strong{font-family:var(--font-display,"Fraunces",serif);font-size:1.04rem;font-weight:600}
.report-card span{font-size:.8rem;color:var(--muted);line-height:1.45}
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-bottom:1.5rem}
.quick-actions .qa{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1.1rem .6rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);font-weight:600;font-size:.86rem;text-align:center;
  box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.quick-actions .qa:hover{text-decoration:none;border-color:#cfe0d8;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.quick-actions .qa-ic{font-size:1.6rem;color:var(--brass)}

/* ---------- Supplement grids ---------- */
.grid-3,.grid-4{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Login ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:1.5rem;position:relative;overflow:hidden;
  background:radial-gradient(130% 130% at 82% -10%, #27735f 0%, #1a4a3d 45%, #0f2e27 100%)}
.auth::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 18% 28%, rgba(199,146,65,.18), transparent 38%),
                   radial-gradient(circle at 88% 78%, rgba(255,255,255,.06), transparent 42%);
  pointer-events:none}
.auth::after{content:"";position:absolute;inset:0;opacity:.04;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39h40M39 0v40' stroke='%23ffffff' stroke-width='.5'/%3E%3C/svg%3E")}
.auth-card{position:relative;background:var(--paper);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:410px;
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.5)}
.auth-card .mark{width:52px;height:52px;border-radius:14px;
  background:linear-gradient(145deg,var(--brass-2),var(--brass));
  display:grid;place-items:center;font-family:var(--font-display,"Fraunces",serif);font-weight:700;
  font-size:1.6rem;color:#231a09;margin-bottom:1.1rem;
  box-shadow:0 8px 20px -6px rgba(176,125,44,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.auth-card h1{font-size:1.55rem;margin-bottom:.15rem}
.auth-card .sub{color:var(--muted);margin-bottom:1.7rem;font-size:.92rem}
.auth-card .field{margin-bottom:.1rem}
.auth-card .btn{width:100%;margin-top:.4rem;padding:.65rem 1rem;font-size:.95rem}

/* ---------- Mobile ---------- */
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink);
  padding:.2rem .4rem;border-radius:8px;transition:var(--t)}
.menu-toggle:hover{background:var(--forest-soft)}
.sidebar-scrim{display:none}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-280px;width:262px;z-index:60;transition:left var(--t);box-shadow:var(--shadow-lg)}
  .sidebar.open{left:0}
  .menu-toggle{display:block}
  .cols-4,.cols-3,.cols-2{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .content{padding:1.1rem}
  .topbar{padding:.6rem 1.1rem}
}
@media(max-width:820px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cols-4,.cols-3,.cols-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .topbar .who-meta{display:none}}

/* Mobile: any table that would overflow scrolls within its card instead of
   forcing the whole page wide. Also tighten table padding and shrink page
   padding so content uses the full narrow viewport. */
@media(max-width:760px){
  .card>.bd, .card>.hd{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table:is(.ledger,.table){font-size:.8rem}
  table:is(.ledger,.table) th, table:is(.ledger,.table) td{padding:.4rem .5rem}
  .page-head{flex-wrap:wrap;gap:.6rem}
  .page-head h1{font-size:1.3rem}
  main, .content, .shell-main{padding-left:.7rem;padding-right:.7rem}
  .btn-row{flex-wrap:wrap}
  .filters{flex-wrap:wrap}
}

@media print{
  /* printing must never clip a wide table — let it lay out in full */
  .main{overflow:visible!important}

  @page{margin:14mm}
  /* hide all interactive chrome so only the document prints */
  .sidebar,.topbar,.sidebar-scrim,.searchbox,.palette,.dd-new,.nav-foot,
  .filters,.filter-bar,.btn,.btn-row,.toolbar,.no-print,.flash,.alert,
  .quick-actions,.attention-card,.pagination,nav,form.toolbar,
  /* Headers PRINT as a document head (previously hidden entirely — every page
     printed titleless). Actions/buttons/forms inside them do not print. */
  .page-head,.ws-head{display:block!important;padding-bottom:.45rem;margin-bottom:.8rem}
  .page-head::after,.ws-head::after{border-top-color:#000;border-bottom-color:#666}
  .page-head .btn,.ws-head .btn,.page-head form,.ws-head form,
  .page-head .btn-row,.ws-head .ws-actions,.page-head .toolbar{display:none!important}
  .shell{display:block}
  .main{display:block}
  .content{padding:0;max-width:none;margin:0;animation:none}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000;text-decoration:none}
  /* ink-friendly surfaces — keep structure, drop shadows/fills */
  .card,.table-wrap,.ws-table,.stat{box-shadow:none!important;border-color:#999}
  .card .hd{background:none}
  /* CRITICAL: undo on-screen sticky scroll caps so long ledgers print in full */
  .table-wrap.sticky,.ws-table.sticky{max-height:none!important;overflow:visible!important}
  table:is(.ledger,.table) thead th{position:static!important}
  /* tables: repeat the header on every page, never split a row */
  table:is(.ledger,.table) thead{display:table-header-group}
  table:is(.ledger,.table) tr,.card,.stat,.net-line,.kpi-grid,.section-title{break-inside:avoid}
  table:is(.ledger,.table) th{background:#eee!important;color:#000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* pills print as light outlines rather than solid ink blocks */
  .pill{background:none!important;color:#000!important;border:1px solid #999}
  /* the print-only letterhead + page-break helpers */
  .print-head{display:block!important}
  .screen-only{display:none!important}
  .page-break{break-before:page}
  h1{font-size:1.4rem}
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:4px}
.sidebar-scrim.show{display:block;position:fixed;inset:0;background:rgba(16,32,27,.45);z-index:55;
  backdrop-filter:blur(1px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(min-width:901px){.sidebar-scrim{display:none!important}}

/* ============================================================
   Shell v2 — grouped navigation, quick-create, command palette
   ============================================================ */
kbd{font-family:"IBM Plex Mono",monospace;font-size:.68rem;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;border-radius:5px;
  padding:.05rem .32rem;color:inherit}
.content kbd,.palette kbd,.searchbox kbd{background:var(--paper-2);border-color:var(--line-strong);color:var(--ink-soft)}

/* sidebar group accordions */
.navgrp{margin:1px 0}
.navgrp summary{display:flex;align-items:center;gap:.65rem;padding:.5rem .8rem;border-radius:9px;
  color:#cadbd2;font-size:.9rem;cursor:pointer;list-style:none;user-select:none;
  font-weight:600;transition:background var(--t),color var(--t)}
.navgrp summary::-webkit-details-marker{display:none}
.navgrp summary:hover{background:rgba(255,255,255,.07);color:#fff}
.navgrp summary .chev{margin-left:auto;font-size:.7rem;opacity:.6;transition:transform var(--t)}
.navgrp[open] summary .chev{transform:rotate(180deg)}
.navgrp[open] summary{color:#fff}
.navgrp .grp-links{padding:.1rem 0 .3rem;margin-left:1.05rem;border-left:1px solid rgba(255,255,255,.1)}
.navgrp .grp-links a{display:flex;align-items:center;gap:.5rem;padding:.38rem .7rem .38rem .85rem;
  border-radius:0 8px 8px 0;color:#b9cfc5;font-size:.86rem;position:relative;
  transition:background var(--t),color var(--t)}
.navgrp .grp-links a:hover{background:rgba(255,255,255,.06);color:#fff}
.navgrp .grp-links a.active{background:linear-gradient(90deg,rgba(36,112,93,.95),rgba(31,95,79,.7));
  color:#fff;font-weight:600}
.navgrp .grp-links a.active::before{content:"";position:absolute;left:-1px;top:15%;height:70%;
  width:2px;background:var(--brass-2)}
.navgrp .grp-links .badge{margin-left:auto;background:var(--brass);color:#231a09;font-size:.66rem;
  font-weight:700;border-radius:var(--radius-pill);padding:.05rem .42rem;min-width:17px;text-align:center}
.nav-foot{padding:.8rem 1.2rem 1.2rem;font-size:.7rem;color:#84a99a;border-top:1px solid rgba(255,255,255,.07);justify-content:space-between;
  margin-top:auto;display:flex;gap:.3rem;align-items:center}
.sidebar{display:flex;flex-direction:column}
.sidebar .nav{flex:1}

/* topbar search trigger */
.searchbox{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line-strong);
  background:var(--paper);border-radius:var(--radius-pill);padding:.4rem .55rem .4rem .8rem;
  font:inherit;font-size:.85rem;color:var(--muted);cursor:pointer;min-width:230px;
  transition:border-color var(--t),box-shadow var(--t)}
.searchbox:hover{border-color:#c0b89f;box-shadow:var(--shadow-sm)}
.searchbox .sb-ic{font-size:1rem;color:var(--ink-soft)}
.searchbox .sb-text{flex:1;text-align:left}
.searchbox .sb-kbd{display:flex;gap:.2rem}
@media(max-width:700px){.searchbox{min-width:0}.searchbox .sb-text,.searchbox .sb-kbd{display:none}}

/* dropdown component */
details.dd{position:relative}
details.dd > summary{list-style:none;cursor:pointer;user-select:none}
details.dd > summary::-webkit-details-marker{display:none}
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);
  padding:.45rem;z-index:80;animation:rise .14s ease both}
.dd-menu.dd-right{left:auto;right:0}
.dd-menu a,.dd-menu .dd-signout,.dd-menu .dd-item-btn{display:block;width:100%;text-align:left;padding:.5rem .7rem;
  border-radius:8px;color:var(--ink);font-size:.88rem;background:none;border:none;font:inherit;
  cursor:pointer;transition:background var(--t)}
.dd-menu a:hover,.dd-menu .dd-signout:hover,.dd-menu .dd-item-btn:hover{background:var(--forest-tint);color:var(--forest-deep);text-decoration:none}
.dd-menu .dd-sec{font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-weight:700;padding:.5rem .7rem .25rem}
.dd-menu .dd-signout,.dd-menu .dd-item-danger{color:var(--danger)}
.dd-menu .dd-signout:hover,.dd-menu .dd-item-danger:hover{background:var(--danger-soft);color:var(--danger)}
.tx-actions-dd{position:relative;display:inline-block}
.tx-actions-dd>summary{padding:.25rem .5rem;border-radius:6px;font-size:1.05rem;line-height:1;
  color:var(--ink-soft);border:1px solid transparent}
.tx-actions-dd>summary:hover{background:var(--forest-tint);color:var(--forest-deep)}
.tx-actions-dd[open]>summary{background:var(--forest-tint)}

/* user chip in topbar */
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.55rem}
.dd-user > summary{display:flex;align-items:center;gap:.6rem;padding:.25rem .55rem .25rem .3rem;
  border-radius:var(--radius-pill);transition:background var(--t)}
.dd-user > summary:hover{background:var(--forest-tint)}
.dd-user .avatar{width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,var(--forest-2),var(--forest));color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;
  box-shadow:0 2px 8px -2px rgba(31,95,79,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.dd-user .who-meta{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.dd-user .who-meta strong{font-size:.86rem;font-weight:600;color:var(--ink)}
.dd-user .role{font-size:.62rem;color:var(--forest-deep);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.dd-user .chev{font-size:.65rem;color:var(--muted)}
.iconbtn{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  font-size:1.05rem;transition:background var(--t)}
.iconbtn:hover{background:var(--forest-tint);text-decoration:none}
.iconbtn .dot{position:absolute;top:1px;right:0;background:var(--danger);color:#fff;font-size:.6rem;
  font-weight:700;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;
  padding:0 .22rem;box-shadow:0 0 0 2px var(--paper)}
.dd-new > summary{box-shadow:0 1px 2px rgba(20,33,28,.12),0 6px 16px -10px rgba(176,125,44,.7)}

/* command palette */
.palette{position:fixed;inset:0;background:rgba(16,32,27,.5);backdrop-filter:blur(2px);
  z-index:120;display:grid;place-items:start center;padding-top:14vh;animation:fade .12s ease}
.palette[hidden]{display:none}
.palette-card{width:min(560px,92vw);background:var(--paper);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line)}
.palette-input{width:100%;border:none;outline:none;font:inherit;font-size:1.02rem;
  padding:1rem 1.2rem;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.palette-list{max-height:46vh;overflow-y:auto;padding:.4rem}
.palette-list .pi{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .8rem;border-radius:9px;color:var(--ink);font-size:.92rem}
.palette-list .pi:hover,.palette-list .pi.sel{background:var(--forest-tint);color:var(--forest-deep);text-decoration:none}
.palette-list .pi.sel{box-shadow:inset 2px 0 0 var(--brass)}
.palette-list .pg{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.palette-list .pi-empty{padding:1rem;text-align:center;color:var(--muted);font-size:.88rem}

@media(max-width:900px){
  .dd-user .who-meta{display:none}
  .topbar{gap:.6rem}
}
@media print{.searchbox,.dd-new,.palette,.nav-foot{display:none!important}}

/* ---------- Form pages v2 ---------- */
.form-card{border-top:3px solid var(--forest);box-shadow:var(--shadow-md)}
.form-card .bd{padding:1.45rem 1.6rem}
.form-card .form-row label{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.field,.field--select{padding:.62rem .8rem}
.form-card .btn[type=submit],.form-card button.btn{min-width:140px}

/* ---------- Review queue v2 ---------- */
.q-card{display:flex;gap:1.4rem;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;
  margin-bottom:.8rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--t),border-color var(--t)}
.q-card:hover{box-shadow:var(--shadow-md);border-color:#d8d0bd}
.q-info{flex:1.4;min-width:0}
.q-amt-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.q-amt{font-size:1.18rem;font-weight:700;color:var(--ink)}
.q-date{font-size:.82rem}
.q-payer{margin-top:.45rem;font-weight:600;color:var(--ink)}
.q-ref{margin-top:.4rem;display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.q-ref-chip{background:var(--forest-tint);color:var(--forest-deep);border-radius:6px;
  padding:.1rem .45rem;font-size:.8rem;font-weight:600}
.q-narr{font-size:.8rem;word-break:break-word}
.q-form{flex:1;min-width:270px;max-width:340px}
.q-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);font-weight:700;margin-bottom:.3rem}
.q-remember{margin:.6rem 0;font-size:.83rem;color:var(--muted)}
.q-remember span{font-weight:400}
.q-actions{display:flex;gap:.5rem}
.q-split-panel{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--line)}
.q-split-hint{font-size:.8rem;color:var(--muted);margin-bottom:.5rem}
.q-split-panel .split-row{display:flex;gap:.4rem;margin-bottom:.4rem}
.q-split-panel .combo{flex:2}.q-split-panel .split-amt{flex:1;min-width:0}
.q-split-panel .dev-pick{flex:1}
.split-running{font-size:.82rem;color:var(--muted);margin:.3rem 0 .6rem}

/* searchable combobox */
.combo{position:relative}
.combo-list{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:40;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:var(--shadow-md);max-height:240px;overflow-y:auto;padding:.25rem}
.combo-opt{padding:.5rem .6rem;border-radius:7px;cursor:pointer;font-size:.9rem;
  display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.combo-opt:hover,.combo-opt.on{background:var(--forest-tint);color:var(--forest-deep)}
.combo-tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;
  background:var(--brass-tint,#f3e7cf);color:var(--brass-deep,#7a5512);
  padding:.05rem .4rem;border-radius:var(--radius-pill);font-weight:700;flex:none}
.combo-empty{padding:.6rem;color:var(--muted);font-size:.85rem;text-align:center}
@media(max-width:760px){.q-card{flex-direction:column;gap:1rem}.q-form{max-width:none}}

.ver-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);padding:.1rem .5rem;font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:#b9cfc5}

/* Alert banners (remittance reminders, etc.) */
.alert{padding:.7rem 1rem;border-radius:8px;border:1px solid;font-size:.9rem;line-height:1.5}
.alert-danger{background:#fdecea;border-color:#f5c6c2;color:#8a1c12}
.alert-warn{background:#fff6e6;border-color:#f0d9a6;color:#7a5410}
.alert a{font-weight:600}
tr.row-danger td{background:#fdf2f1}
tr.row-warn td{background:#fffaf0}
details.inline-edit summary{cursor:pointer;list-style:none}
details.inline-edit summary::-webkit-details-marker{display:none}

/* ============================================================
   WORKSPACE — shared enterprise list/workflow surface
   A unified vocabulary for the core data screens (ledger,
   envelopes, expenses) so they read as one product: a calm
   summary strip, a contained command toolbar, and refined
   tables. Built on the existing forest/brass/parchment tokens.
   ============================================================ */

/* Page header refinement: a hairline brass rule under the title
   block evokes a ledger's ruled page without shouting. */
.ws-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;position:relative;padding-bottom:.8rem;margin-bottom:1.2rem}
.ws-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  border-top:2px solid var(--forest);border-bottom:1px solid var(--brass)}
.ws-head .ws-titles h1{margin:0;letter-spacing:-.015em}
.ws-head .ws-sub{color:var(--muted);font-size:.9rem;margin-top:.15rem}
.ws-head .ws-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* Summary strip: quiet metric cards. The figure is set in the
   serif-adjacent mono at a confident size; the label is a small
   uppercase caption. A thin brass keyline on the lead card marks
   the primary metric. */
.ws-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.7rem;margin-bottom:1.15rem}
.ws-metric{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:.85rem 1rem .9rem;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.ws-metric:hover{border-color:#cfe0d8;box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.ws-metric .wm-l{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;display:flex;align-items:center;gap:.35rem}
/* display:block is load-bearing, not decoration. Every one of these in the
   templates is a <span>, so while they defaulted to inline the value and its
   sub-label ran together on one line ("KSh 1,660received this month") and the
   margin-top below them did nothing at all — the three-line stack the label,
   value and sub-label were written to form only exists once they are blocks. */
.ws-metric .wm-v{display:block;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:1.4rem;font-weight:600;color:var(--ink);margin-top:.32rem;letter-spacing:-.02em;
  line-height:1.05}
.ws-metric .wm-v .cur{font-size:.72rem;color:var(--muted);font-weight:600;margin-right:.18rem}
.ws-metric .wm-sub{display:block;font-size:.74rem;color:var(--ink-soft);margin-top:.2rem}
.ws-metric.is-primary{border-top:2.5px solid var(--brass)}
.ws-metric.is-positive .wm-v{color:var(--forest)}
.ws-metric.is-negative .wm-v{color:var(--danger)}
.ws-metric.is-warn{border-top:2.5px solid var(--amber)}
/* clickable metric (filter chip) */
a.ws-metric{text-decoration:none}
a.ws-metric.is-active{border-color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest)}
.ws-metric .wm-n{margin-left:auto;background:var(--paper-2);border-radius:9px;
  padding:0 .42rem;font-size:.66rem;color:var(--ink-soft);font-weight:700}

/* Command toolbar: a single contained bar holding filters and
   the row of actions. Sticky so it stays in reach on long lists. */
.ws-toolbar{display:flex;align-items:flex-end;gap:.65rem;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:.75rem .85rem;margin-bottom:1.1rem;box-shadow:var(--shadow-sm)}
.ws-toolbar .f{display:flex;flex-direction:column;gap:.25rem}
.ws-toolbar .f.grow{flex:1;min-width:170px}
.ws-toolbar label{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:700}
.ws-toolbar .ws-tb-actions{display:flex;gap:.4rem;align-items:flex-end;margin-left:auto;flex-wrap:wrap}
.ws-toolbar .ws-divider{align-self:stretch;width:1px;background:var(--line);margin:0 .15rem}

/* Refined table treatment layered on .ledger/.table: a touch denser,
   with a clearer header and calmer zebra. Numbers get the mono
   tabular treatment already; we just tighten the rhythm. */
.ws-table{border-radius:var(--radius);overflow-x:auto;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);background:var(--paper)}
.ws-table table:is(.ledger,.table){font-size:.85rem}
.ws-table table:is(.ledger,.table) th{background:linear-gradient(180deg,var(--paper-2),var(--paper));
  padding:.6rem .85rem;font-size:.66rem}
.ws-table table:is(.ledger,.table) td{padding:.58rem .85rem}
.ws-table table:is(.ledger,.table) tbody tr:nth-child(even){background:rgba(31,95,79,.022)}
.ws-table table:is(.ledger,.table) tbody tr:hover{background:var(--forest-tint)}
/* a subtle leading accent on hover, like a cursor in a ledger margin */
.ws-table table:is(.ledger,.table) tbody tr{box-shadow:inset 0 0 0 0 var(--brass-2);transition:background .12s,box-shadow .12s}
.ws-table table:is(.ledger,.table) tbody tr:hover{box-shadow:inset 3px 0 0 -0 var(--brass-2)}

/* Dignified empty state: an invitation, not just an icon. */
.ws-empty{text-align:center;padding:3.2rem 1.5rem;color:var(--muted)}
.ws-empty .we-mark{font-size:2rem;color:var(--line-strong);margin-bottom:.5rem;
  font-family:var(--font-display,"Fraunces",serif)}
.ws-empty .we-title{font-family:var(--font-display,"Fraunces",serif);font-size:1.1rem;color:var(--ink-soft);
  margin-bottom:.3rem}
.ws-empty .we-hint{font-size:.88rem}
.ws-empty a{font-weight:600}

@media(max-width:760px){
  .ws-summary{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .ws-metric .wm-v{font-size:1.2rem}
  .ws-toolbar .ws-tb-actions{margin-left:0;width:100%}
  .ws-head{align-items:flex-start}
}

/* ---- Dashboard "needs attention" card ---- */
.attention-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brass);
  border-radius:12px;padding:.85rem 1rem 1rem;margin-bottom:1rem;box-shadow:0 1px 2px rgba(20,58,49,.04)}
.att-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.att-title{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.02rem;color:var(--forest-deep)}
.att-count{background:var(--brass);color:#fff;font-size:.72rem;font-weight:700;border-radius:999px;
  min-width:1.3rem;height:1.3rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .35rem}
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:.55rem}
.att-item{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.5rem;
  padding:.6rem .7rem;border:1px solid var(--line);border-radius:9px;text-decoration:none;
  background:var(--paper,#faf8f1);transition:transform .08s ease,box-shadow .08s ease,border-color .08s ease}
.att-item:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(20,58,49,.08);border-color:var(--line-strong)}
.att-ic{font-size:1.05rem;line-height:1;opacity:.85}
.att-n{font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--forest-deep)}
.att-l{font-size:.82rem;color:var(--ink,#2c352f);line-height:1.2}
.att-danger{border-left:3px solid var(--danger)}
.att-danger .att-n{color:var(--danger)}
.att-danger .att-ic{color:var(--danger)}
.att-warn{border-left:3px solid var(--amber)}
.att-warn .att-n{color:var(--amber)}
.att-warn .att-ic{color:var(--amber)}
.att-muted{border-left:3px solid var(--line-strong)}
.att-muted .att-n{color:var(--muted)}

/* review-queue bulk allocate */
.bulk-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--brass-soft);
  border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin-bottom:1rem}
.bulk-bar-lbl{display:flex;align-items:center;gap:.4rem;font-weight:600;white-space:nowrap}
.bulk-count{font-size:.85rem}
.q-check{display:flex;align-items:center;padding-right:.6rem}
.q-check input{width:18px;height:18px}
.btn-brass{background:var(--brass);color:#fff;border-color:var(--brass)}

/* error pages */
.error-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:2rem 1.2rem;
  background:radial-gradient(120% 90% at 50% -10%,var(--forest-tint) 0%,var(--paper) 55%)}
.error-page .ep-card{max-width:520px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2.6rem 2.4rem}
.error-page .ep-mark{width:54px;height:54px;border-radius:15px;margin:0 auto 1.1rem;
  display:grid;place-items:center;font-family:Fraunces,Georgia,serif;font-size:1.7rem;
  font-weight:700;color:#fff;background:linear-gradient(150deg,var(--forest-2),var(--forest-deep));
  box-shadow:0 6px 18px rgba(20,58,49,.28)}
.error-page .error-code{font-family:'IBM Plex Mono',monospace;font-size:2.2rem;color:var(--brass);
  font-weight:700;line-height:1;letter-spacing:.04em}
.error-page h1{font-family:Fraunces,Georgia,serif;font-size:1.45rem;margin:.5rem 0 .8rem}
.error-page .error-lead{color:var(--muted);line-height:1.7;margin-bottom:1.5rem;font-size:.95rem}
.error-page .btn-row{justify-content:center}
@media(max-width:560px){.error-page .ep-card{padding:2rem 1.4rem}}

/* ============================================================================
   Reusable utilities — added in the design-system pass (v1.16.0).
   These exist so templates can drop ad-hoc inline styles in favour of named,
   consistent classes. Spacing uses the same rhythm throughout the app.
   ========================================================================== */
/* spacing */
.u-mt-0{margin-top:0}.u-mt{margin-top:1rem}.u-mt-sm{margin-top:.5rem}.u-mt-lg{margin-top:1.6rem}
.u-mb-0{margin-bottom:0}.u-mb{margin-bottom:1rem}.u-mb-sm{margin-bottom:.5rem}.u-mb-lg{margin-bottom:1.6rem}
/* constrained reading/forms width, centred */
.u-narrow{max-width:560px}.u-narrow-sm{max-width:440px}.u-narrow-lg{max-width:720px}
/* flex helpers */
.u-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.u-row-end{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.u-between{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.u-grow{flex:1 1 auto;min-width:0}
/* text */
.u-right{text-align:right}.u-center{text-align:center}
.u-small{font-size:.82rem}.u-strong{font-weight:600}
/* a thin section divider, replacing inline hr styles */
.u-divider{border:none;border-top:1px solid var(--line);margin:1.4rem 0}

/* Defensive responsive safeguard: on small screens, any ledger table that was
   NOT placed inside a scroll wrapper (.ws-table / .table-wrap already scroll)
   still gets horizontal scroll instead of forcing the whole page wider. */
@media(max-width:760px){
  .card .bd > table:is(.ledger,.table),
  .card .bd > table.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap}
}

/* ============================================================================
   Shared UI components — adoption sweep (v1.17.0).
   Toolbars, alerts, filter bars, KPI grid, sticky table headers. Used across
   the dashboard, list, ledger and reconciliation screens for one consistent,
   premium accounting-platform feel.
   ========================================================================== */

/* Action toolbar: a right-aligned cluster of buttons next to a heading. */
.toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.toolbar.right{justify-content:flex-end;margin-left:auto}

/* Alerts / callouts: a bordered notice with a coloured left rule + soft tint. */
.alert{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.85rem 1.1rem;
  border:1px solid var(--line);border-left:3px solid var(--forest);border-radius:var(--radius-sm);
  background:var(--paper);margin-bottom:1.4rem;font-size:.9rem}
.alert .alert-title{font-family:Fraunces,Georgia,serif;font-weight:600}
.alert-info{border-left-color:#3a6ea5;background:#f1f5fa}
.alert-success{border-left-color:var(--forest);background:var(--forest-tint)}
.alert-amber{border-left-color:var(--amber,#b7791f);background:#fbf5e9}
.alert-brass{border-left-color:var(--brass);background:var(--brass-soft)}
.alert-danger{border-left-color:var(--danger);background:#fbeeee}

/* Quick tabs: the pill row used to switch a list's filter or sort. Defined here
   rather than inside one page's <style> block — it was local to
   transaction_list.html, so the pending-receipt page used the same class names
   and rendered them as bare unstyled links. */
.tx-quicktabs{display:flex;gap:.35rem;flex-wrap:wrap;margin:.7rem 0 .9rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.tx-qtab{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;border-radius:999px;
  font-size:.83rem;font-weight:600;color:var(--ink-soft);text-decoration:none;border:1px solid transparent;
  transition:background .12s,color .12s}
.tx-qtab:hover{background:var(--forest-soft);color:var(--forest-deep)}
.tx-qtab.active{background:var(--forest);color:#fff}
.tx-qtab-badge{background:rgba(0,0,0,.15);border-radius:999px;padding:0 .4rem;font-size:.74rem}
.tx-qtab.active .tx-qtab-badge{background:rgba(255,255,255,.25)}

/* Filter bar: a consistent inline filter form that wraps gracefully on mobile. */
.filter-bar{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:.8rem .9rem;margin-bottom:1.4rem}
.filter-bar .fb-field{display:flex;flex-direction:column;gap:.25rem}
.filter-bar .fb-field label{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:700}
.filter-bar .field,.filter-bar input:not([type=checkbox]),.filter-bar select{margin:0;width:auto;min-width:150px}
.filter-bar input[type=checkbox]{margin:0 .3rem 0 0}
.filter-bar .fb-spacer{flex:1 1 auto}

/* KPI grid: responsive auto-fit metric tiles (replaces fixed cols on the dash). */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1rem;margin-bottom:1.4rem}

/* Sticky table headers: opt-in via .sticky on a scroll wrapper. The body scrolls
   inside a capped height while the header row stays pinned — the behaviour used
   by Xero/QuickBooks for long ledgers. */
.table-wrap.sticky,.ws-table.sticky{max-height:70vh;overflow:auto}
.table-wrap.sticky thead th,.ws-table.sticky thead th{position:sticky;top:0;z-index:3}

/* dashboard helpers */
.chart-center{display:flex;justify-content:center;align-items:center}
.chart-empty{padding:2rem 0;text-align:center;color:var(--muted)}
.chart-box{position:relative;height:220px;width:100%}
.chart-box.chart-box-lg{height:280px}
.section-head{display:flex;align-items:center;gap:.6rem}
.section-head .muted{font-weight:400;font-size:.8rem}

/* table totals row + channel-mix bars (dashboard / reports) */
:is(.ledger,.table) tfoot tr.tfoot-total td{border-top:2px solid var(--line-strong);font-weight:700}
.bar-item{margin-bottom:.7rem}
.bar-item .kv{margin-bottom:.25rem}
.bar-item .kv .cnt{font-size:.74rem;color:var(--muted)}
.channel-total{border-top:1px solid var(--line);padding-top:.5rem;margin-top:.2rem}

/* micro-utilities for table helper text + inline action forms */
.u-xs{font-size:.72rem}
.u-nowrap{white-space:nowrap}
.u-inline{display:inline}
.u-inline-flex{display:inline-flex;gap:.3rem;align-items:center}
.pill-xs{font-size:.62rem;padding:.05rem .4rem}
.attach-text{white-space:pre-wrap;font-size:.78rem;color:var(--muted);margin-top:.2rem}
.detail-card{max-width:680px}
.bd-flush{padding:0}
.u-minw{min-width:140px}
:is(.ledger,.table) tr.total-row td{border-top:2px solid var(--forest);font-weight:600}
.stat .value .pill{font-size:.82rem;vertical-align:middle}
.pos-rel{position:relative}
.col-receipt{width:104px}
.col-channel{width:84px}
.devgrp-select{margin-top:.2rem;font-size:.8rem}

/* additional spacing utilities for the wider rollout */
.u-m-0{margin:0}
.u-my{margin:1rem 0}.u-my-sm{margin:.6rem 0}
.u-mt-xs{margin-top:.3rem}.u-mb-xs{margin-bottom:.3rem}
.u-ml-sm{margin-left:.5rem}
.lh-loose{line-height:1.7}

/* rollout batch — more utilities */
.u-w-auto{width:auto}
.text-danger{color:var(--danger)}
.u-subtle{font-weight:400;font-size:.8rem}
.u-items-end{align-items:flex-end}
.u-p{padding:1rem}

/* rollout polish — recurring patterns from secondary screens */
.u-nolink{text-decoration:none}
.u-bt{border-top:1px solid var(--line)}
.u-xxs{font-size:.6rem}
.u-row-sm{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.u-mr-sm{margin-right:.5rem}
.u-narrow-xl{max-width:760px}
.u-strike{text-decoration:line-through;opacity:.55}

/* rollout polish — container widths, separators, indents, meta text */
.u-narrow-md{max-width:660px}
.u-pad-cell{padding:.3rem 1rem}
.u-section-top{margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem}
.u-list-loose{line-height:1.8;margin:0 0 .6rem 1.1rem}
.text-amber{color:var(--amber)}
.u-indent-1{padding-left:1.4rem}.u-indent-2{padding-left:1.6rem}.u-indent-3{padding-left:1.8rem}
.u-meta{font-size:.72rem;color:var(--muted)}

/* Print letterhead — hidden on screen, shown by the @media print rules above. */
.print-head{display:none}
@media print{
  .print-head{margin:0 0 1rem;padding-bottom:.6rem;border-bottom:2px solid #000;text-align:center}
  .print-head .ph-church{font-family:Fraunces,Georgia,serif;font-size:1.5rem;font-weight:700;line-height:1.2}
  .print-head .ph-title{font-size:1.05rem;margin-top:.15rem}
  .print-head .ph-meta{font-size:.8rem;color:#333;margin-top:.25rem}
  /* print-only signature block for approval/remittance documents */
  .print-sign{display:flex!important;gap:3rem;margin-top:2.4rem;break-inside:avoid}
  .print-sign .sig{flex:1;border-top:1px solid #000;padding-top:.3rem;font-size:.82rem}
}
.print-sign{display:none}
.u-col-span{grid-column:1/-1}
/* Shared name/fund/member "type-ahead" popup used across the app (cash entry,
   envelope ledger, cashbook, and now benevolent forms). Previously only the
   .ac-active highlight state lived here — .ac-box/.ac-item themselves were
   copy-pasted into three separate templates with drifting details (one used
   position:fixed, the others position:absolute; font sizes differed), and a
   plain, unstyled <div class="ac-box"> rendered inline in the page instead of
   floating over it wherever a template's local copy was missing or stale.
   One definition now; templates using position:fixed for a table-embedded
   input (e.g. the envelope ledger) still work, since they only need position
   itself overridden, not the rest of this rule. */
.ac-box{display:none;position:absolute;z-index:60;left:0;right:0;top:100%;
  background:var(--paper,#fff);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(20,33,28,.14);max-height:240px;overflow:auto;margin-top:.2rem}
.ac-item{padding:.45rem .7rem;cursor:pointer;font-size:.85rem;line-height:1.35}
.ac-item:hover,.ac-item.ac-active{background:var(--accent-soft,#eef5f2)}
.ac-item .muted{font-size:.78rem}
.ac-item.ac-warn{border-left:3px solid var(--amber,#b8860b)}
.ac-item .ac-note{font-size:.75rem;color:var(--amber,#8a6d1f);margin-top:.15rem}

/* "Latest Sabbath" dashboard snapshot */
.sabbath-snap{border-left:3px solid var(--brass)}
.sabbath-snap .ss-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;flex-wrap:wrap}
.sabbath-snap .ss-eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:700}
.sabbath-snap .ss-date{font-family:var(--font-display,Fraunces,Georgia,serif);font-size:1.2rem;margin-top:.1rem}
.sabbath-snap .ss-total{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1.55rem;font-weight:600;
  color:var(--forest);white-space:nowrap}
.sabbath-snap .ss-total .ksh{font-size:.7rem;color:var(--muted);margin-right:.2rem;font-weight:600}
.sabbath-snap .ss-delta{font-size:.78rem;font-weight:700;margin-left:.4rem}
.sabbath-snap .ss-delta.up{color:var(--forest)}
.sabbath-snap .ss-delta.down{color:var(--danger)}
.sabbath-snap .ss-meta{font-size:.82rem;color:var(--muted);margin-top:.4rem}
.sabbath-snap .ss-funds{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.sabbath-snap .ss-fund{font-size:.76rem;background:var(--forest-tint);border-radius:20px;
  padding:.2rem .65rem;white-space:nowrap}
.sabbath-snap .ss-fund b{color:var(--forest);font-weight:600}
@media(max-width:560px){.sabbath-snap .ss-total{font-size:1.3rem}}

/* ============================================================
   UX/A11y system additions (v1.74)
   ============================================================ */
/* Visually-hidden but screen-reader-available */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip-to-content link — appears on keyboard focus */
.skip-link{position:fixed;top:-60px;left:12px;z-index:2000;background:var(--forest);
  color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-weight:600;font-size:.9rem;box-shadow:var(--shadow-md);transition:top .18s ease}
.skip-link:focus{top:0;color:#fff;outline:3px solid var(--brass-2);outline-offset:2px}
main.content:focus{outline:none}

/* Global HTMX loading bar */
#htmx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:3000;
  background:linear-gradient(90deg,var(--forest),var(--brass-2));
  opacity:0;transition:width .25s ease,opacity .3s ease;pointer-events:none;
  box-shadow:0 0 8px rgba(31,95,79,.5)}
#htmx-progress.run{opacity:1}
body.htmx-request #htmx-progress{opacity:1}

/* Dismissible flash messages */
.flash-region{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.8rem}
.flash-region .flash{margin-bottom:0}
.flash{justify-content:space-between}
.flash .flash-msg{flex:1}
.flash-x{background:none;border:none;cursor:pointer;font-size:1.15rem;line-height:1;
  color:inherit;opacity:.55;padding:0 .15rem;border-radius:5px;transition:opacity var(--t)}
.flash-x:hover{opacity:1}
.flash-x:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1}

/* Inline button busy state (htmx) */
.btn[aria-busy="true"],.btn.htmx-request{position:relative;color:transparent!important;pointer-events:none}
.btn[aria-busy="true"]::after,.btn.htmx-request::after{content:"";position:absolute;
  width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:btnspin .6s linear infinite;color:#fff}
.btn-ghost.htmx-request::after{color:var(--forest)}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* Horizontal scroll container for data tables (auto-applied on small screens) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll>table:is(.ledger,.table){min-width:540px}
@media(min-width:761px){.table-scroll>table:is(.ledger,.table){min-width:0}}
.table-scroll{scrollbar-width:thin}

/* Busy submit button (double-submit guard) */
.btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.btn.is-busy::after{content:"";position:absolute;width:14px;height:14px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:btnspin .6s linear infinite;color:#fff}
.btn-ghost.is-busy::after,.btn-danger.is-busy::after{color:var(--forest)}

/* ============================================================
   USER PREFERENCES (Appearance & Preferences)
   Applied via data-* attributes + --pref-accent on <html>.
   ============================================================ */

/* ---- Accent colour override (non-default presets / custom) ---- */
html[data-accent]:not([data-accent="forest"]){
  --forest:var(--pref-accent);
  --forest-2:color-mix(in srgb, var(--pref-accent) 85%, white);
  --forest-deep:color-mix(in srgb, var(--pref-accent) 72%, black);
  --forest-soft:color-mix(in srgb, var(--pref-accent) 12%, var(--paper));
  --forest-tint:color-mix(in srgb, var(--pref-accent) 7%, var(--paper));
  --accent:var(--pref-accent);
  --accent-soft:color-mix(in srgb, var(--pref-accent) 14%, var(--paper));
  --green:var(--pref-accent);
  --ring:0 0 0 3px color-mix(in srgb, var(--pref-accent) 22%, transparent);
}

/* ---- Dark theme tokens ---- */
:root{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

html[data-theme="dark"]{
  --ink:#e8efea; --ink-soft:#b7c5bd; --muted:#8fa099;
  --parchment:#10150f; --paper:#1a211c; --paper-2:#202824;
  --line:#2c3832; --line-strong:#3c4a43;
  --forest-soft:#15241d; --forest-tint:#14201b; --card-head:#222b26;
  --brass-soft:#2c2415; --danger-soft:#2e1c1a; --amber-soft:#2c2410; --amber:#d4a83a;
  --blue-soft:#16242e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.6);
  --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  html[data-theme="system"]{
    --ink:#e8efea; --ink-soft:#b7c5bd; --muted:#8fa099;
    --parchment:#10150f; --paper:#1a211c; --paper-2:#202824;
    --line:#2c3832; --line-strong:#3c4a43;
    --forest-soft:#15241d; --forest-tint:#14201b; --card-head:#222b26;
    --brass-soft:#2c2415; --danger-soft:#2e1c1a; --amber-soft:#2c2410; --amber:#d4a83a;
    --blue-soft:#16242e;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.6);
    --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
html[data-theme="dark"] body,
html[data-theme="system"] body{background-image:none}
@media (prefers-color-scheme:dark){html[data-theme="system"] body{background-image:none}}

/* ---- Font size ---- */
html[data-font="small"]{font-size:13.5px}
html[data-font="medium"]{font-size:15px}
html[data-font="large"]{font-size:16.5px}
html[data-font="small"] body{font-size:13.5px}
html[data-font="large"] body{font-size:16.5px}

/* ---- Layout width ---- */
html[data-width="full"] .content{max-width:none}
html[data-width="boxed"] .content{max-width:1180px;margin-inline:auto}

/* ---- Card corners ---- */
html[data-cards="square"]{--radius:3px;--radius-sm:2px;--radius-lg:4px}

/* ---- Sidebar modes (desktop only; mobile keeps the slide-over) ---- */
@media(min-width:901px){
  html[data-sidebar="compact"] .sidebar{width:200px}
  html[data-sidebar="compact"] .nav a,
  html[data-sidebar="compact"] .navgrp summary{font-size:.84rem;padding-block:.4rem}
  html[data-sidebar="icon"] .sidebar{width:64px;overflow:visible}
  html[data-sidebar="icon"] .sidebar .brand b,
  html[data-sidebar="icon"] .sidebar .brand span,
  html[data-sidebar="icon"] .nav a span:not(.ic):not(.badge):not(.chev),
  html[data-sidebar="icon"] .navgrp summary span:not(.ic):not(.chev),
  html[data-sidebar="icon"] .nav-foot,
  html[data-sidebar="icon"] .navgrp .grp-links{display:none}
  html[data-sidebar="icon"] .navgrp[open] .grp-links{display:block;position:absolute;
    left:64px;top:auto;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:.4rem;min-width:180px;z-index:50}
  html[data-sidebar="icon"] .nav a,
  html[data-sidebar="icon"] .navgrp summary{justify-content:center;position:relative}
  html[data-sidebar="icon"] .nav a .badge,
  html[data-sidebar="icon"] .nav a .ic{margin:0}
}

/* ---- Table density ---- */
html[data-density="compact"] table:is(.ledger,.table) th{padding:.4rem .6rem}
html[data-density="compact"] table:is(.ledger,.table) td{padding:.32rem .6rem;font-size:.84rem}

/* ---- Accessibility: high contrast ---- */
html[data-contrast="high"]{
  --ink:#000; --ink-soft:#1a1a1a; --muted:#3a3a3a; --line:#9a9a8c;
  --line-strong:#6a6a5c;
}
html[data-contrast="high"][data-theme="dark"]{
  --ink:#fff; --ink-soft:#eee; --muted:#cfcfcf; --line:#7a8a83; --line-strong:#9fb0a8;
}
html[data-contrast="high"] .btn{border-width:2px}
html[data-contrast="high"] a{text-decoration:underline}
html[data-contrast="high"] .nav a.active{outline:2px solid var(--forest);outline-offset:-2px}

/* ---- Accessibility: reduced motion ---- */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}

/* ---- Accessibility: larger click targets ---- */
html[data-targets="large"] .btn{min-height:44px;padding-block:.6rem}
html[data-targets="large"] .btn-sm{min-height:40px}
html[data-targets="large"] .nav a,
html[data-targets="large"] .navgrp summary{min-height:42px;align-items:center}
html[data-targets="large"] .dd-menu a{padding-block:.6rem}
html[data-targets="large"] .iconbtn{min-width:44px;min-height:44px}

/* ---- Accessibility: stronger / disabled focus ring ---- */
html:not([data-focus="off"]) :focus-visible{outline:2px solid var(--forest);outline-offset:2px}
html[data-contrast="high"] :focus-visible{outline:3px solid var(--brass-2);outline-offset:2px}
html[data-focus="off"] :focus-visible{outline:none}

/* ============================================================
   TOASTS (configurable notifications)
   ============================================================ */
.toast-host{position:fixed;top:14px;right:14px;z-index:4000;display:flex;
  flex-direction:column;gap:.5rem;max-width:min(360px,calc(100vw - 28px));pointer-events:none}
.toast{pointer-events:auto;background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--forest);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);padding:.7rem .85rem;display:flex;gap:.55rem;
  align-items:flex-start;font-size:.88rem;color:var(--ink);
  animation:toastIn .22s ease both}
.toast.success{border-left-color:var(--forest)}
.toast.error{border-left-color:var(--danger)}
.toast.info,.toast.warning{border-left-color:var(--amber)}
.toast .t-ic{font-weight:700;flex:none;line-height:1.3}
.toast.success .t-ic{color:var(--forest)} .toast.error .t-ic{color:var(--danger)}
.toast.info .t-ic,.toast.warning .t-ic{color:var(--amber)}
.toast .t-msg{flex:1}
.toast .t-x{background:none;border:none;cursor:pointer;font-size:1.05rem;line-height:1;
  color:var(--muted);padding:0 .1rem;opacity:.7}
.toast .t-x:hover{opacity:1}
.toast.leaving{animation:toastOut .25s ease both}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(16px)}}
html[data-motion="reduced"] .toast{animation:none}

/* Dashboard widget container — allows per-user reordering via CSS order */
.dash-widgets{display:flex;flex-direction:column;gap:1.15rem}
.dash-widgets>[data-w]{margin-bottom:0}

/* Keep KPI amounts on a single line (e.g. "KSh 2,013,168.00") */
.kpi-grid .stat .value{font-size:clamp(1.02rem,2.1vw,1.4rem);white-space:nowrap;
  overflow-wrap:normal;word-break:normal;letter-spacing:-.015em}
.kpi-grid .stat .value .ksh{font-size:.66em;margin-right:.15rem}
@media(max-width:420px){.kpi-grid .stat .value{font-size:1.12rem}}

/* Reconciliation page — print only the statement, nicely aligned */
.print-only{display:none}
.recon-sheet table:is(.ledger,.table){table-layout:fixed;width:100%}
.recon-sheet table:is(.ledger,.table) td:first-child{width:auto}
.recon-sheet table:is(.ledger,.table) td.num{width:9.5rem;text-align:right;white-space:nowrap}
.recon-sheet table:is(.ledger,.table) td.act{width:2.2rem}
.recon-sheet .indent{padding-left:1.4rem}
.recon-print-head .rp-church{font-family:Fraunces,Georgia,serif;font-size:1.5rem;font-weight:700}
.recon-print-head .rp-title{font-size:1.05rem;margin-top:.1rem;font-weight:600}
.recon-print-head .rp-date{font-size:.85rem;color:#333;margin-top:.15rem}
@media print{
  .print-only{display:block}
  .recon-print-head{text-align:center;margin:0 0 1.2rem;padding-bottom:.6rem;border-bottom:2px solid #000}
  .recon-sheet{border:none!important;box-shadow:none!important;max-width:100%!important}
  .recon-sheet .hd{border-bottom:1px solid #000}
  .recon-sheet table:is(.ledger,.table) td.act{display:none}
}

/* Command palette: data results with sublabel + icon */
.palette .pi .pg-ic{display:inline-block;width:1.3rem;opacity:.7}
.palette .pi .ps{color:var(--muted);font-size:.82rem;margin-left:.25rem}
.palette .pi{display:flex;align-items:center;gap:.1rem}
.palette .pi .pg{margin-left:auto;font-size:.72rem;color:var(--muted);background:var(--wash,#f0f3f2);padding:.05rem .4rem;border-radius:5px}

/* User-selectable body font family (Appearance → Font) */
:root[data-fontfamily="system"]{--font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-display:system-ui,-apple-system,"Segoe UI",sans-serif}
:root[data-fontfamily="serif"]{--font-body:Georgia,"Times New Roman",Cambria,serif;--font-display:Georgia,"Times New Roman",Cambria,serif}
:root[data-fontfamily="legible"]{--font-body:"Atkinson Hyperlegible","Public Sans",system-ui,sans-serif;--font-display:"Atkinson Hyperlegible","Public Sans",system-ui,sans-serif}
:root[data-fontfamily="mono"]{--font-body:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;--font-display:"IBM Plex Mono",ui-monospace,monospace}

/* Sidebar colour treatments (Appearance → Sidebar style) */
:root[data-sidebarstyle="midnight"]{--sidebar-bg:linear-gradient(180deg,#1a2233 0%,#161d2b 55%,#11161f 100%);--sidebar-brand:linear-gradient(180deg,#1e2740,#1a2336)}
:root[data-sidebarstyle="brass"]{--sidebar-bg:linear-gradient(180deg,#3a2c14 0%,#332710 55%,#2a1f0c 100%);--sidebar-brand:linear-gradient(180deg,#43320f,#3a2c12)}
:root[data-sidebarstyle="charcoal"]{--sidebar-bg:linear-gradient(180deg,#26282b 0%,#1f2123 55%,#191b1d 100%);--sidebar-brand:linear-gradient(180deg,#2c2f33,#26282b)}

/* Breadcrumb trail */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted,#667);margin:0 0 1rem;flex-wrap:wrap}
.breadcrumb a{color:var(--muted,#667);text-decoration:none}
.breadcrumb a:hover{color:var(--forest);text-decoration:underline}
.breadcrumb .bc-sep{opacity:.5}
.breadcrumb .bc-section{color:var(--ink-soft,#3f4f48)}
.breadcrumb .bc-current{color:var(--forest);font-weight:600}

/* Parent nav group shows it contains the current page */
.navgrp:has(a.active) > summary{color:var(--sidebar-brand-fg,#e8d9b8)}
.navgrp:has(a.active) > summary .ic{opacity:1}

/* Attachment popover (clickable paperclip) */
.clip-wrap{position:relative;display:inline-block}
.clip-btn{border:none;background:none;cursor:pointer;font-size:.95rem;padding:0 .1rem;line-height:1}
.clip-pop{position:absolute;z-index:40;top:1.4rem;left:0;min-width:220px;max-width:340px;
  background:var(--paper,#fff);border:1px solid var(--line,#ddd);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);padding:.5rem;display:flex;flex-direction:column;gap:.4rem}
.clip-pop[hidden]{display:none}
.clip-item{display:block;font-size:.82rem;padding:.35rem .5rem;border-radius:7px;
  background:var(--paper-2,#f6f3ec);text-decoration:none;color:var(--ink,#222)}
.clip-item.clip-text{white-space:pre-wrap;font-family:var(--font-mono,monospace);line-height:1.4}
a.clip-item:hover{background:var(--forest-soft,#e7f0eb)}

/* ---- Leader area shared layout (hero header, KPI cards, tables) ---- */
.ld-filter-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.ld-filter{display:flex;gap:.45rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}
.ld-filter .field{padding:.4rem .55rem;font-size:.88rem;width:auto}
.ld-kpis-1{display:grid;grid-template-columns:minmax(260px,340px);gap:.8rem;margin-bottom:1.2rem}
.ld-kpis-1 .stat .value{font-size:1.4rem}
.ld-kpis-1 .stat .value .ksh{font-size:.66em;margin-right:.12rem;opacity:.7}

/* ============================================================
   Report engine — statement-set report page (v2.85)
   The masthead is set like the head of a printed financial
   statement: eyebrow, Fraunces title, mono period line, closed
   by a double rule (forest over brass hairline). Everything else
   stays quiet: labeled filters, one segmented export control,
   accented KPI cards, disciplined tables.
   ============================================================ */
.rpt-mast{margin-bottom:1.1rem}
.rpt-mast .eyebrow,.ws-head .eyebrow,.page-head .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin-bottom:.25rem}
.rpt-mast h1{margin:0 0 .2rem;line-height:1.15}
.rpt-mast .desc{color:var(--muted);font-size:.92rem;max-width:70ch}
.rpt-mast .period{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.82rem;color:var(--ink-soft);margin-top:.35rem;
  font-variant-numeric:tabular-nums}
.rpt-mast .rule{margin-top:.8rem;border-top:2px solid var(--forest);
  border-bottom:1px solid var(--brass);height:3px}
.rpt-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.export-seg{display:inline-flex;border:1px solid var(--line-strong);
  border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.export-seg a,.export-seg button{padding:.42rem .8rem;font-size:.8rem;font-weight:600;
  color:var(--forest);text-decoration:none;border:none;background:none;cursor:pointer;
  border-right:1px solid var(--line);font-family:inherit;line-height:1.2}
.export-seg a:last-child,.export-seg button:last-child{border-right:none}
.export-seg a:hover,.export-seg button:hover{background:var(--forest-soft);color:var(--forest-deep)}
.export-seg .seg-lbl{padding:.42rem .7rem .42rem .8rem;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-right:1px solid var(--line);background:var(--paper-2);cursor:default}
.engine-grid{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}
.engine-cell{min-width:280px}
.engine-cell .card .hd h3{font-size:.98rem}
.engine-chart{position:relative;height:260px;width:100%}
.kpi-band{display:flex;flex-wrap:wrap;gap:1rem}
.kpi-band .stat{flex:1;min-width:140px;margin:0}
.rpt-empty{text-align:center;padding:2.4rem 1rem;color:var(--muted)}
.rpt-empty .big{font-family:var(--font-display,"Fraunces",serif);font-size:1.05rem;
  color:var(--ink-soft);margin-bottom:.3rem}
td.cell-blank{color:var(--line-strong)}
@media print{
  .rpt-mast .rule{border-top-color:#000;border-bottom-color:#666}
  .engine-grid{display:block}
  .engine-cell{width:100%!important}
}

/* Report library — card grid (v2.85) */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem}
.lib-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:.95rem 1.05rem;display:flex;flex-direction:column;gap:.35rem;
  transition:transform .12s,box-shadow .12s}
.lib-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.lib-card .eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass)}
.lib-card .t{font-weight:600;line-height:1.3}
.lib-card .t a{color:var(--ink);text-decoration:none}
.lib-card .t a:hover{color:var(--forest)}
.lib-card .d{font-size:.8rem;color:var(--muted);flex:1}
.lib-card .ft{display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:.5rem;margin-top:.25rem}
.lib-card .btn-icon{background:none;border:none;cursor:pointer;font-size:1rem;
  color:var(--brass);padding:0;line-height:1}
.lib-cat{font-family:var(--font-display,"Fraunces",serif);font-size:1.05rem;
  color:var(--ink-soft);margin:1.4rem 0 .6rem;padding-bottom:.3rem;
  border-bottom:1px solid var(--brass);display:flex;align-items:baseline;gap:.5rem}
.lib-cat .n{font-family:var(--font-body);font-size:.72rem;color:var(--muted);font-weight:600}

/* ============================================================
   Dashboards — shared section header + masthead reuse (v2.86)
   The same statement vocabulary as the report engine: Fraunces
   section heads closed by a brass hairline, and the .rpt-mast
   masthead on both dashboards (which also restores a printed
   header — .page-head/.ws-head are hidden in print).
   ============================================================ */
.sec-h{font-family:var(--font-display,"Fraunces",serif);font-size:1.05rem;
  font-weight:600;color:var(--ink-soft);margin:1.6rem 0 .7rem;
  padding-bottom:.35rem;border-bottom:1px solid var(--brass);
  display:flex;align-items:baseline;gap:.55rem;letter-spacing:0;text-transform:none}
.sec-h .n,.sec-h .muted{font-family:var(--font-body);font-size:.75rem;
  color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.sec-h .right{margin-left:auto}
.rpt-mast .mast-actions{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap}
@media print{
  .sec-h{border-bottom-color:#666}
  .exec-cards,.insight-tiles,.kpi-strip,.chart-grid{break-inside:avoid}
}

/* ---- display preferences (v2.96): typography & table presentation ---- */
/* Heading typeface: serif (Fraunces, default) or match the body face */
html[data-headings="sans"]{--font-display:"Public Sans",system-ui,-apple-system,sans-serif}
/* Figures: tabular monospace (default) or the body face. tabular-nums is kept
   either way so columns of amounts still align digit-for-digit. */
html[data-figures="body"] .mono,html[data-figures="body"] .num,
html[data-figures="body"] table:is(.ledger,.table) tfoot th.num,
html[data-figures="body"] table:is(.ledger,.table) tfoot td.num{
  font-family:inherit;font-variant-numeric:tabular-nums}
/* Table stripes off */
html[data-stripes="off"] table:is(.ledger,.table) tbody tr:nth-child(even){background:transparent}
/* Full grid: column separators too (last column stays clean) */
html[data-grid="grid"] table:is(.ledger,.table) th,html[data-grid="grid"] table:is(.ledger,.table) td{
  border-inline-end:1px solid var(--line)}
html[data-grid="grid"] table:is(.ledger,.table) th:last-child,
html[data-grid="grid"] table:is(.ledger,.table) td:last-child{border-inline-end:none}
/* Sticky table headers off */
html[data-stickyhead="off"] table:is(.ledger,.table) th{position:static}

/* ---------- Report statement rows ----------
   `.row-emph` marks every subtotal and every grand-total footer the report
   engine renders, and had never been defined — so on every engine report a
   total was set exactly like the line items above it. A statement of financial
   position listed bank, petty cash, advances, total assets, trust payable,
   loans, total liabilities and net assets in one undifferentiated column of
   figures, and left the reader to work out which three of those were the
   answer. That is the whole of the complaint, and it was one missing rule.

   The levels below exist because emphasis alone is not enough: a group heading,
   a subtotal and the bottom line are three different things and were all
   arriving as "emphasised". */
table:is(.ledger,.table) tr.row-emph > td{
  font-weight:700;color:var(--ink);
  border-top:1px solid var(--line-strong);
  background:rgba(31,95,79,.035)}
table:is(.ledger,.table) tfoot tr.row-emph > td{
  border-top:2px solid var(--forest);background:rgba(31,95,79,.05)}

/* a group heading: ASSETS, LIABILITIES — structure, not a figure */
table:is(.ledger,.table) tr.row-heading > td{
  font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-ink,var(--brass));background:transparent;
  border-top:0;border-bottom:1px solid var(--brass);
  padding-top:1.1rem}
table:is(.ledger,.table) tr.row-heading + tr > td{border-top:0}

/* a subtotal of the lines directly above it */
table:is(.ledger,.table) tr.row-subtotal > td{
  font-weight:700;border-top:1px solid var(--line-strong);
  background:rgba(31,95,79,.035)}

/* the figure the statement exists to give: net assets, surplus for the year */
table:is(.ledger,.table) tr.row-grand > td{
  font-weight:800;font-size:1.02rem;
  border-top:2px solid var(--forest);
  border-bottom:3px double var(--forest);
  background:rgba(31,95,79,.06);padding-top:.7rem;padding-bottom:.7rem}

@media print{
  table:is(.ledger,.table) tr.row-emph > td,
  table:is(.ledger,.table) tr.row-subtotal > td{background:transparent;border-top:1px solid #000}
  table:is(.ledger,.table) tr.row-grand > td{
    background:transparent;border-top:2px solid #000;border-bottom:3px double #000}
  table:is(.ledger,.table) tr.row-heading > td{color:#000;border-bottom:1px solid #666}
}