/* KHATA — design system. No build step: this ships to shared cPanel hosting
   where npm is not available. Light theme only, painted explicitly.

   Redesign direction: indigo #2544D6 accent spent only on primary action /
   active nav / focus, flat dark sidebar, Inter for UI + IBM Plex Mono for every
   figure, 4-based spacing. The old paper/brass token NAMES are kept and simply
   re-pointed, so the inline styles still scattered through the Blade views keep
   resolving until they are swept out. */

:root{
  /* neutrals — cool, a faint indigo bias so grey reads as chosen */
  --paper:        #F5F6F9;   /* app canvas            */
  --paper-raised: #EEF0F5;   /* hover / subtle fills   */
  --card:         #FFFFFF;   /* raised surface        */
  --ink:          #0C1220;
  --ink-soft:     #434B5B;
  --ink-faint:    #79839A;
  --line:         #D7DBE6;   /* stronger border / input */
  --line-soft:    #E6E9F1;   /* hairline               */

  /* accent — indigo. Kept under the old --brass names so inline styles adapt. */
  --accent:       #2544D6;
  --accent-hi:    #1C36B0;
  --accent-lo:    #16298B;
  --accent-tint:  #ECEFFE;
  --accent-ring:  #C2CCF7;
  --brass:        #2544D6;
  --brass-dark:   #1C36B0;

  /* semantic — desaturated, not alarm colours */
  --income:     #0F7A52;  --income-bg:  #E4F3EC;
  --expense:    #C23A2B;  --expense-bg: #FBEBE8;
  --amber:      #A2620F;  --amber-bg:   #FAF0DE;
  --violet:     #574B9A;  --violet-bg:  #ECEAF7;

  /* flat dark navigation */
  --nav-bg:      #0E1220;
  --nav-fg:      #A7AFBE;
  --nav-strong:  #FFFFFF;
  --nav-active:  rgba(255,255,255,.065);
  --nav-rail:    #5B7BFF;
  --nav-group:   #5C6577;
  --nav-line:    rgba(255,255,255,.08);

  --radius: 8px;            /* kept name; was 3px */
  --r-sm:   6px;
  --r-lg:   14px;

  --shadow:    0 1px 2px rgba(12,18,32,.06), 0 1px 3px rgba(12,18,32,.04);
  --shadow-md: 0 6px 16px rgba(12,18,32,.09), 0 2px 5px rgba(12,18,32,.05);
  --shadow-lg: 0 20px 48px rgba(12,18,32,.18), 0 6px 14px rgba(12,18,32,.10);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font);font-weight:600;margin:0;letter-spacing:-0.02em;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent-tint);}

/* keyboard focus — one visible ring everywhere */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:var(--r-sm);
}

/* thin, quiet scrollbars — no chunky Windows default anywhere */
html{scrollbar-width:thin;scrollbar-color:rgba(12,18,32,.22) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(12,18,32,.18);border:3px solid transparent;
  background-clip:content-box;border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:rgba(12,18,32,.32);background-clip:content-box;}

/* ---------- layout ---------- */
#shell{display:flex;min-height:100vh;}
#sidebar{
  width:224px;flex-shrink:0;background:var(--nav-bg);color:var(--nav-fg);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
#brand{padding:22px 20px 16px 20px;border-bottom:1px solid var(--nav-line);}
#brand .mark{font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:0.06em;color:#fff;}
#brand .sub{font-size:10px;color:var(--nav-group);text-transform:uppercase;letter-spacing:0.16em;margin-top:4px;}
nav{flex:1;padding:8px 0 16px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable;transition:scrollbar-color .2s;}
#sidebar:hover nav{scrollbar-color:rgba(255,255,255,.22) transparent;}
nav::-webkit-scrollbar{width:10px;}
nav::-webkit-scrollbar-thumb{background:transparent;border:3px solid transparent;
  background-clip:content-box;border-radius:999px;transition:background .2s;}
#sidebar:hover nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);background-clip:content-box;}
nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);background-clip:content-box;}
.navgroup-label{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;
  color:var(--nav-group);padding:15px 20px 6px 20px;
}
.navgroup-label:first-child{padding-top:4px;}
.navtab{
  display:flex;align-items:center;gap:10px;padding:8px 20px;font-size:13px;color:var(--nav-fg);
  border-left:2px solid transparent;cursor:pointer;transition:background .12s,color .12s;
}
.navtab svg{width:16px;height:16px;flex-shrink:0;opacity:.85;}
.navtab:hover{background:var(--nav-active);color:var(--nav-strong);}
.navtab.active{background:var(--nav-active);color:var(--nav-strong);border-left-color:var(--nav-rail);font-weight:550;}
#sidebar-foot{padding:14px 20px;border-top:1px solid var(--nav-line);font-size:11px;color:var(--nav-group);line-height:1.6;}
#sidebar-foot > div:first-child{color:#D7DBE4;font-weight:600;}

#main{flex:1;min-width:0;display:flex;flex-direction:column;}
#topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 28px;height:60px;border-bottom:1px solid var(--line-soft);background:var(--card);
  position:sticky;top:0;z-index:5;
}
#topbar h2{font-size:18px;}
#topbar .meta{font-size:12px;color:var(--ink-faint);margin-top:2px;}
#content{padding:26px 28px 64px 28px;max-width:1240px;}

/* ---------- generic ---------- */
.row{display:flex;gap:16px;flex-wrap:wrap;}
.grow{flex:1;min-width:200px;}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-pad{padding:18px 20px;}
.section-title{font-size:11px;text-transform:uppercase;letter-spacing:0.09em;color:var(--ink-faint);
  font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.hr{height:1px;background:var(--line-soft);margin:18px 0;border:none;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 15px;height:38px;
  border-radius:var(--r-sm);border:1px solid transparent;background:var(--accent);color:#fff;
  font-size:13px;font-weight:600;letter-spacing:0.005em;transition:background .14s,border-color .14s,box-shadow .14s;
  white-space:nowrap;
}
.btn:hover{background:var(--accent-hi);}
.btn:active{background:var(--accent-lo);}
.btn.secondary{background:var(--card);color:var(--ink-soft);border-color:var(--line);font-weight:500;}
.btn.secondary:hover{background:var(--paper-raised);border-color:var(--ink-faint);}
.btn.small{height:30px;padding:0 10px;font-size:12px;}
.btn.danger{background:var(--expense);border-color:var(--expense);color:#fff;}
.btn.danger:hover{background:var(--expense);filter:brightness(.94);}
.btn:disabled{opacity:0.5;cursor:not-allowed;}

.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-sm);font-size:10.5px;
  font-weight:600;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;}
/* Flat-status pills — the sale/handover lifecycle of a unit; belong on a flat only. */
.pill.available{background:var(--income-bg);color:var(--income);}
.pill.booked{background:var(--amber-bg);color:var(--amber);}
.pill.sold{background:var(--accent-tint);color:var(--accent-hi);}
.pill.handed{background:var(--violet-bg);color:var(--violet);}
/* Semantic pills — done / in progress / blocked / neutral. */
.pill.ok{background:var(--income-bg);color:var(--income);}
.pill.wait{background:var(--amber-bg);color:var(--amber);}
.pill.stop{background:var(--expense-bg);color:var(--expense);}
.pill.info{background:var(--line-soft);color:var(--ink-soft);}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;font-size:11.5px;text-transform:none;letter-spacing:0.01em;color:var(--ink-faint);
  font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper-raised);}
td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink-soft);}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--paper-raised);}
td.num, th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);}
.tbl-wrap{overflow-x:auto;border-radius:var(--radius);}
.empty{padding:32px 10px;text-align:center;color:var(--ink-faint);font-size:13px;}

.kpi{padding:16px 18px;}
.kpi .label{font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink-faint);font-weight:500;}
.kpi .value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:24px;font-weight:600;
  margin-top:7px;color:var(--ink);letter-spacing:-0.01em;}
.kpi .sub{font-size:11.5px;color:var(--ink-faint);margin-top:5px;}
.kpi.accent-income .value{color:var(--income);}
.kpi.accent-expense .value{color:var(--expense);}
.kpi.accent-amber .value{color:var(--amber);}

.tag-in{color:var(--income);font-weight:600;}
.tag-out{color:var(--expense);font-weight:600;}

.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.formgrid.one{grid-template-columns:1fr;}
.field label{display:block;font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:6px;
  text-transform:none;letter-spacing:0;}
.field input, .field select, .field textarea{
  width:100%;padding:0 12px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font-size:14px;color:var(--ink);transition:border-color .14s,box-shadow .14s;
}
.field textarea{height:auto;padding:9px 12px;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);
}
.field.span2{grid-column:span 2;}
.err{color:var(--expense);font-size:12px;margin-top:5px;display:block;}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(12,18,32,0.45);display:flex;
  align-items:flex-start;justify-content:center;z-index:50;padding:44px 20px;overflow-y:auto;
  backdrop-filter:blur(2px);}
.modal{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  width:100%;max-width:560px;box-shadow:var(--shadow-lg);}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line-soft);}
.modal-head h3{font-size:16px;}
.modal-close{background:none;border:none;font-size:20px;line-height:1;color:var(--ink-faint);padding:2px 6px;border-radius:var(--r-sm);}
.modal-close:hover{color:var(--ink);background:var(--paper-raised);}
.modal-body{padding:18px 20px;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line-soft);display:flex;justify-content:flex-end;gap:10px;}

.pending-banner{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:10px 16px;margin-bottom:14px;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--amber-bg);color:var(--amber);font-size:13px;font-weight:600;
  font-family:var(--font);cursor:pointer;transition:filter .12s;}
.pending-banner:hover{filter:brightness(0.96);}
.pending-banner .arrow{margin-left:auto;font-weight:400;}

/* `.tabs` is what four screens actually write; it was never defined, so their
   tab rows had no rule under them and no gap between them. */
.tabbar,.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap;}
.tabbtn{padding:10px 1px 12px;font-size:13px;font-weight:600;color:var(--ink-faint);
  border-bottom:2px solid transparent;margin-bottom:-1px;background:none;border-top:0;border-left:0;border-right:0;
  font-family:var(--font);transition:color .12s;}
.tabbtn:hover{color:var(--ink-soft);}
.tabbtn.active{color:var(--ink);border-bottom-color:var(--accent);}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.tile{justify-content:flex-start;padding:14px 12px;font-size:13px;text-align:left;width:100%;height:auto;}
.tile .ico{font-size:16px;margin-right:6px;}

.flash{padding:11px 14px;border-radius:var(--r-sm);font-size:13px;
  background:var(--income-bg);color:var(--income);border:1px solid #BFE0CE;}
.flash.bad{background:var(--expense-bg);color:var(--expense);border-color:#F0CBC6;}

#flash-stack{position:fixed;top:16px;right:24px;z-index:100;display:flex;
  flex-direction:column;gap:10px;max-width:420px;}
#flash-stack .flash{position:relative;padding-right:40px;box-shadow:var(--shadow-md);}
.flash-close{position:absolute;top:6px;right:8px;padding:2px 6px;border:none;
  background:none;color:inherit;opacity:0.6;cursor:pointer;font-size:16px;line-height:1;}
.flash-close:hover{opacity:1;}

.folio{font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  text-align:right;margin-top:30px;padding-top:10px;border-top:1px dashed var(--line);}

/* ---------- phone: the owner reads the dashboard on his phone ---------- */
@media (max-width: 820px){
  #flash-stack{left:12px;right:12px;top:8px;max-width:none;}
  #shell{flex-direction:column;}
  #sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;
    overflow-x:auto;padding:0 8px;}
  #brand{border-bottom:none;padding:12px 12px;flex-shrink:0;}
  #brand .sub{display:none;}
  nav{display:flex;padding:0;overflow-x:auto;}
  .navgroup-label{display:none;}
  .navtab{white-space:nowrap;border-left:none;border-bottom:2px solid transparent;padding:14px 12px;}
  .navtab.active{border-left-color:transparent;border-bottom-color:var(--nav-rail);}
  #sidebar-foot{display:none;}
  #topbar{padding:0 16px;}
  #content{padding:16px 16px 60px 16px;}
  .formgrid{grid-template-columns:1fr;}
  .field.span2{grid-column:span 1;}
  .kpi .value{font-size:20px;}
}

.print-only{display:none;}

@media print{
  .no-print{display:none !important;}
  .print-only{display:block !important;}
  #shell,#main{display:block;}
  #content{padding:0;max-width:none;}
  body{background:#fff;}
  .card,.dt{box-shadow:none;border:1px solid #999;}
  .dt thead th{position:static;}
  thead{display:table-header-group;}
  tr{page-break-inside:avoid;}
}

/* ----------------------------------------------------------------------
   Reports toolbar — one card, one question per row.

   What was here was a single wrapping flex box holding fourteen controls,
   which on any real screen width broke into ragged rows of different
   heights. The rows below are fixed: WHICH MONEY, WHICH DATES, then narrow
   and fold. The five filters an operator rarely touches are behind "More
   filters" and, when the panel is shut, state themselves as chips in its
   place — so the same row is either the control or its summary, never both.
   ---------------------------------------------------------------------- */
.rtb{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:14px;}
.rtb__row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 14px;}
.rtb__row + .rtb__row,.rtb__adv{border-top:1px solid var(--line-soft);}
.rtb__lbl{font-size:11.5px;font-weight:600;color:var(--ink-faint);white-space:nowrap;}
.rtb__end{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* the period row: presets, then a typed range */
.rtb__row .chip{height:30px;display:inline-flex;align-items:center;}
.rtb__dates{display:inline-flex;align-items:center;gap:6px;padding-left:12px;
  border-left:1px solid var(--line-soft);}
.rtb__dates input{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font-family:var(--mono);font-size:12px;color:var(--ink);}
.rtb__dates input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.rtb__dates.on input{border-color:var(--accent);}
.rtb__dates span{font-size:11.5px;color:var(--ink-faint);}

/* a labelled picker sitting inline on the toolbar */
.rtb__pick{display:inline-flex;align-items:center;gap:7px;}
.rtb__pick select{height:32px;max-width:230px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);font-family:var(--font);font-size:12.5px;color:var(--ink);}
.rtb__pick select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}

.rtb__more{gap:8px;}
.rtb__more b{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;}
.rtb__more .tri{margin:0;transform:rotate(90deg);}
.rtb__more .tri.open{transform:rotate(-90deg);}

/* the five filters that are usually left alone */
.rtb__adv{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px 14px;
  padding:13px 14px;background:var(--paper-raised);}
.rtb__adv .field label{font-size:11.5px;color:var(--ink-faint);margin-bottom:5px;}
.rtb__adv .field input,.rtb__adv .field select{height:34px;font-size:13px;}

/* results card header */
.dt__title{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0;
  font-size:13.5px;font-weight:600;color:var(--ink);}
.dt__title .sub{font-size:12px;font-weight:500;color:var(--ink-faint);}
.dt__sum{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:600;}
.dt__sum.out{color:var(--expense);}
.dt__sum.in{color:var(--income);}

/* one entry, sitting under the group it belongs to */
.rg-e{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 9px;}
.rg-e .d{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap;}
.rg-e .v{font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  border:1px solid var(--line-soft);border-radius:4px;padding:0 5px;white-space:nowrap;}
.rg-e .p{color:var(--ink);}
.rg-e .a{font-size:12px;color:var(--ink-faint);}
.rg-e .n{flex-basis:100%;font-size:12px;color:var(--ink-faint);}
.cellnote{font-size:12px;color:var(--ink-faint);margin-top:2px;}

.dt__hint{padding:9px 14px;border-top:1px solid var(--line-soft);background:var(--paper-raised);
  font-size:11.5px;color:var(--ink-faint);}

[x-cloak]{display:none !important;}

@media (max-width:820px){
  .rtb__row{align-items:stretch;}
  .rtb__end{margin-left:0;}
  .rtb__dates{padding-left:0;border-left:0;}
  .rtb__pick{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;}
  .rtb__pick select{max-width:none;width:100%;}
  .rtb__adv{grid-template-columns:1fr;}
}

/* ---------- permissions, stated rather than tabulated ---------- */
.rolecard{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
}
.rolecard > header{
  padding:14px 18px;border-bottom:1px solid var(--line-soft);background:var(--paper-raised);
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
}
.rolecard h4{font-size:16px;}
.rolecard .who{font-size:11.5px;color:var(--ink-faint);margin-top:3px;}
.rolecard .locked{
  font-size:11px;color:var(--accent-hi);background:var(--accent-tint);
  border:1px solid var(--accent-ring);border-radius:var(--r-sm);padding:3px 8px;white-space:nowrap;font-weight:600;
}
.rolecard .body{padding:6px 18px 14px 18px;}
.capgroup{margin-top:12px;}
.capgroup > .name{
  font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-faint);
  padding-bottom:6px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;
}
.checkline{
  display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:var(--r-sm);
  cursor:pointer;transition:background .12s;
}
.checkline:hover{background:var(--paper-raised);}
.checkline input{width:auto;margin:2px 0 0 0;flex-shrink:0;}
.checkline .text{min-width:0;}
.checkline .label{font-size:13.5px;line-height:1.3;}
.checkline .hint{font-size:11.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4;}
.checkline.is-on .label{font-weight:600;}
.checkline.is-locked{opacity:0.65;cursor:default;}
.checkline.is-locked:hover{background:none;}

/* ---------- a rule read as a sentence ---------- */
.rulesentence{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:12px;box-shadow:var(--shadow);
}
.rulesentence .lead{font-size:13.5px;line-height:1.6;}
.rulesentence .lead b{font-weight:600;}
.chiprow{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.chip{
  font-size:12px;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  transition:background .12s,color .12s,border-color .12s;
}
.chip:hover{border-color:var(--accent);}
.chip.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-hi);font-weight:600;}
.chip.on::before{content:"✓ ";}

/* ---------- where an entry has got to (the full stepper, detail view) ---------- */
.stepper{display:flex;align-items:flex-start;gap:0;margin:4px 0;flex-wrap:wrap;}
.step{display:flex;align-items:flex-start;gap:7px;padding-right:14px;}
.step .dot{
  width:17px;height:17px;border-radius:50%;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--line);background:var(--card);
  font-size:10px;line-height:14px;text-align:center;color:var(--ink-faint);
}
.step.done .dot{background:var(--income);border-color:var(--income);color:#fff;}
.step.now .dot{border-color:var(--amber);background:var(--amber-bg);color:var(--amber);font-weight:700;}
.step .what{font-size:11.5px;line-height:1.35;}
.step .what .who{color:var(--ink-faint);}
.step.done .what{color:var(--ink-soft);}
.step.now .what{font-weight:600;}
.step.todo .what{color:var(--ink-faint);}
.step + .step{border-left:1px solid var(--line-soft);padding-left:14px;}

/* ---------- "who has it now", one line ---------- */
.entry-progress{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;}
.entry-progress .ep-lines{display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.45;}
.ep-done{color:var(--income);}
.ep-now{color:var(--amber);font-weight:600;}
.ep-pos{color:var(--income);font-weight:600;}
.ep-neg{color:var(--expense);font-weight:600;}
.ep-info{color:var(--ink-soft);font-weight:600;}

/* ---------- a short explanation above a screen ---------- */
.helpnote{
  background:var(--paper-raised);border:1px solid var(--line-soft);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:12px 16px;font-size:12.5px;color:var(--ink-soft);
  line-height:1.6;margin-bottom:18px;
}
.helpnote b{color:var(--ink);}

/* ---------- cost heads: pick on the left, edit lines on the right ---------- */
.picklist{display:flex;flex-direction:column;}
.picklist .item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 12px;border:0;border-bottom:1px solid var(--line-soft);
  background:transparent;color:inherit;font-family:inherit;font-size:13.5px;
}
.picklist .item:last-child{border-bottom:0;}
.picklist button.item{cursor:pointer;}
.picklist button.item:hover{background:var(--paper-raised);}
.picklist .item.is-picked{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent);}
.picklist .item.is-off{opacity:0.5;}
.picklist .item .grow{min-width:0;flex:1;}
.picklist .item .sub{display:block;font-size:11px;color:var(--ink-faint);margin-top:2px;line-height:1.4;}
.picklist .item .ico{font-size:17px;width:24px;text-align:center;flex-shrink:0;}
.rowtools{display:flex;gap:4px;align-items:center;flex-shrink:0;}
.rowtools .btn.small{padding:0 8px;height:26px;font-size:11px;}
.ordbtn{
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  border-radius:var(--r-sm);width:22px;height:22px;padding:0;font-size:10px;line-height:1;
}
.ordbtn:hover{border-color:var(--accent);color:var(--accent-hi);}
.ordbtn:disabled{opacity:0.25;cursor:default;}

/* ============================================================
   NEW COMPONENTS — used by the rebuilt Reports and Users & roles
   screens (Phases 2–3). Safe to ship unused.
   ============================================================ */

/* segmented control — Money out / in / both */
.seg{display:inline-flex;background:var(--paper-raised);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:3px;gap:3px;}
.seg button{height:32px;padding:0 16px;border:0;background:transparent;border-radius:5px;
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink-faint);cursor:pointer;transition:color .12s,background .12s;}
.seg button:hover{color:var(--ink-soft);}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
.seg button.on.k-out{color:var(--expense);}
.seg button.on.k-in{color:var(--income);}

/* active-filter chips (removable) */
.chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.chip-f{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 5px 0 10px;border-radius:999px;
  background:var(--accent-tint);color:var(--accent-hi);font-size:12px;font-weight:600;}
.chip-f::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.chip-f button{border:0;background:none;color:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:.55;padding:0 3px;}
.chip-f button:hover{opacity:1;}
.chips .clear{font-size:12px;color:var(--ink-faint);text-decoration:underline;cursor:pointer;
  background:none;border:0;font-family:var(--font);}

/* totals strip */
.totalsbar{display:flex;flex-wrap:wrap;gap:14px 30px;padding:14px 18px;background:var(--paper-raised);
  border:1px solid var(--line-soft);border-radius:var(--radius);margin-bottom:14px;}
.totalsbar > div{font-size:12px;color:var(--ink-faint);}
.totalsbar b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;
  font-weight:600;margin-top:3px;color:var(--ink);}
.totalsbar .out b{color:var(--expense);}
.totalsbar .in  b{color:var(--income);}
.totalsbar .net b{color:var(--accent);}
.totalsbar .lg{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* share bar inside a table cell */
.share{display:flex;align-items:center;gap:9px;min-width:120px;}
.share .trk{flex:1;height:6px;border-radius:999px;background:var(--line-soft);overflow:hidden;}
.share .fil{height:100%;background:var(--accent);}
.share > span{font-family:var(--mono);font-size:11px;color:var(--ink-faint);width:32px;text-align:right;}

/* group / drill rows */
.tri{display:inline-block;width:0;height:0;margin-right:9px;vertical-align:middle;
  border-left:5px solid var(--ink-faint);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .12s;}
.tri.open{transform:rotate(90deg);}

/* collapsible role card (Users & roles tab 2) */
.rc{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--card);
  box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden;}
.rc > summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;
  align-items:flex-start;justify-content:space-between;gap:16px;}
.rc > summary::-webkit-details-marker{display:none;}
.rc h4{font-size:15px;}
.rc .sum{font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.55;}
.rc .sum b{color:var(--ink);}
.rc .who2{font-size:11.5px;color:var(--ink-faint);margin-top:5px;}
.rc .disc{font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap;}
.rc[open] .disc::after{content:" \25be";}
.rc:not([open]) .disc::after{content:" \25b8";}
.rc .caps{padding:6px 12px 14px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 16px;}
.rc--locked{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;}

/* plain-sentence rule card (Users & roles tab 3) */
.rule-s{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--card);
  box-shadow:var(--shadow);padding:13px 16px;margin-bottom:9px;font-size:13.5px;
  line-height:1.7;color:var(--ink-soft);}
.rule-s b{color:var(--ink);}
.rule-s .chain{margin-top:5px;font-size:12.5px;color:var(--ink-faint);}

/* data table — toolbar + sortable sticky header + footer pager */
.dt{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;}
.dt__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 12px;border-bottom:1px solid var(--line-soft);}
.dt__search{position:relative;flex:1;min-width:170px;max-width:300px;}
.dt__search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-faint);pointer-events:none;}
.dt__search input{width:100%;height:34px;padding:0 12px 0 31px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);font-family:var(--font);font-size:13px;color:var(--ink);}
.dt__search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.dt__filters{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.dt__chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  font-family:var(--font);font-size:12px;font-weight:500;color:var(--ink-soft);transition:background .13s,border-color .13s;}
.dt__chip:hover{background:var(--paper-raised);}
.dt__chip.on{border-color:var(--accent);color:var(--accent-hi);background:var(--accent-tint);}
.dt__scroll{overflow-x:auto;}
.dt table{width:100%;border-collapse:collapse;font-size:13.5px;}
.dt thead th{position:sticky;top:0;z-index:1;text-align:left;background:var(--paper-raised);
  font-size:11.5px;font-weight:600;letter-spacing:0.02em;color:var(--ink-faint);
  padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap;}
.dt th.sortable{cursor:pointer;user-select:none;}
.dt th.sortable:hover{color:var(--ink-soft);}
.dt th .arw{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;opacity:0;}
/* On a right-aligned numeric heading the marker goes BEFORE the word, so the
   heading still ends on the same edge the figures below it line up against. */
.dt th .arw.arw-pre{margin-left:0;margin-right:6px;}
.dt th.sortable:hover .arw{opacity:.3;border-top:5px solid currentColor;}
.dt th.sorted-asc .arw{opacity:1;border-bottom:5px solid var(--accent);border-top:0;}
.dt th.sorted-desc .arw{opacity:1;border-top:5px solid var(--accent);}
.dt th.num,.dt td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.dt tbody td{padding:11px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:middle;}
.dt tbody tr:last-child td{border-bottom:none;}
.dt tbody tr:hover td{background:var(--paper-raised);}
.dt td.num{color:var(--ink);}
.dt td.num.neg{color:var(--expense);}
.dt td.num.pos{color:var(--income);}
.dt .strong{color:var(--ink);font-weight:600;}
.dt__act{width:1%;white-space:nowrap;text-align:right;}
/* SCOPED TO .dt. Unscoped, this hid the buttons in any cell that borrowed
   .dt__act for its alignment — including the draft Edit/Delete/Send row in
   partials/my-pending, which has no .dt ancestor to hover and so had no way
   of ever showing them again. */
.dt .dt__act .btn{opacity:0;transition:opacity .12s;}
.dt tbody tr:hover .dt__act .btn{opacity:1;}
.dt__empty{padding:34px 16px;text-align:center;color:var(--ink-faint);font-size:13px;}
/* ---------- icon row actions ----------
   NEVER put display:flex on the <td> itself. It takes the cell out of the
   table's column model, so the header stops lining up with the body and every
   other column is resized around a cell that is no longer a cell. That is what
   broke the Collections table. The cell stays a cell; the flex row goes inside. */
.rowacts{display:flex;gap:6px;align-items:center;justify-content:flex-end;}
.iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex-shrink:0;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink-soft);
  transition:background .13s,border-color .13s,color .13s;
}
.iconbtn svg{width:16px;height:16px;}
/* Hidden on the desktop table, where the hover label does the work; shown on a
   phone, where there is no hover and a bare glyph is a guess. */
.iconbtn__label{display:none;}
.iconbtn:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-hi);}
.iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.iconbtn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.iconbtn.primary:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:#fff;}
.iconbtn:disabled{opacity:.45;cursor:not-allowed;}
/* Undoing a payment is at least as powerful as making one — it should not
   look like the print button next to it. Red only on hover: an action that
   shouts before it is reached for is an action people stop reading. */
.iconbtn.danger:hover{background:var(--expense-bg);border-color:var(--expense);color:var(--expense);}

/* The label opens to the LEFT. The action column is the right-hand edge of a
   horizontally scrolling container, so a bubble drawn outwards would be clipped
   by .dt__scroll; there is always room inwards. */
.iconbtn[data-tip]::after{
  content:attr(data-tip);position:absolute;right:calc(100% + 7px);top:50%;
  transform:translateY(-50%);z-index:5;pointer-events:none;
  background:var(--ink);color:#fff;border-radius:var(--r-sm);
  padding:4px 9px;font-size:11px;font-weight:500;white-space:nowrap;
  opacity:0;transition:opacity .12s;
}
.iconbtn[data-tip]:hover::after,
.iconbtn[data-tip]:focus-visible::after{opacity:1;}
.dt tr.g1 > td:first-child{padding-left:38px;}
.dt tr.g1 > td{background:var(--paper-raised);}
.dt tr.g2 > td:first-child{padding-left:56px;}
.dt tr.gsum > td{border-top:1px solid var(--line);color:var(--ink);font-weight:600;}
.dt__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-faint);}
.dt__per{display:flex;align-items:center;gap:7px;}
.dt__per select{height:28px;padding:0 6px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font-family:var(--font);font-size:12px;color:var(--ink-soft);}
.dt__pages{display:flex;align-items:center;gap:4px;}
.dt__pg{min-width:28px;height:28px;padding:0 7px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font-family:var(--font);font-size:12px;color:var(--ink-soft);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;}
.dt__pg:hover:not(:disabled){background:var(--paper-raised);}
.dt__pg.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.dt__pg:disabled{opacity:.4;cursor:not-allowed;}

/* stacked-card table for narrow screens (Phase 4 opt-in via .stack-sm) */
@media (max-width:640px){
  /* THE TABLE ITSELF HAS TO STOP BEING A TABLE. Turning only the rows into
     blocks left <table> and <tbody> laying out as a table, so the intrinsic
     column widths still applied and every "card" stayed wider than the phone —
     the amount ran off the right-hand edge, which is the one thing this
     breakpoint exists to prevent. */
  .stack-sm,
  .stack-sm tbody{display:block;width:100%;}
  .stack-sm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .stack-sm tbody tr{display:block;border:1px solid var(--line-soft);border-radius:var(--radius);
    margin-bottom:10px;padding:6px 12px;background:var(--card);}
  /* THE CELL STAYS A BLOCK. As a flex row every child became a flex ITEM, so a
     cell holding a name and a phone number — or a date, a late pill and the
     cheque note — laid them out side by side and the card grew far wider than
     the phone. Block keeps them stacked; the label is pinned in the gutter. */
  .stack-sm tbody td{display:block;position:relative;border:0;
    padding:7px 0 7px 38%;text-align:right;min-width:0;overflow-wrap:anywhere;}
  .stack-sm tbody td::before{content:attr(data-label);position:absolute;left:0;top:7px;
    width:36%;text-align:left;color:var(--ink-faint);font-weight:500;}
  .stack-sm tbody td.num{font-size:15px;}
  /* A cell with no data-label would otherwise be pushed against an empty box. */
  .stack-sm tbody td:not([data-label])::before{content:none;}
  .stack-sm tbody td.dt__act{display:block;width:auto;padding:10px 0 2px 0;}
  .stack-sm tbody td.dt__empty-cell{display:block;padding:0;text-align:center;}
  /* Full-width tap targets: on a phone these are thumbs, not a mouse. */
  .stack-sm .rowacts{justify-content:stretch;gap:8px;}
  .stack-sm .rowacts .iconbtn{flex:1;height:38px;gap:7px;}
  .stack-sm .iconbtn__label{display:inline;font-size:12.5px;font-weight:600;}
  /* The hover label has nothing to hover on a touch screen, and at this width
     there is no room to the left for it either. */
  .stack-sm .iconbtn[data-tip]::after{display:none;}
}

/* ----------------------------------------------------------------------
   Users & roles — one role on screen, and a rule you can read as a chain.
   ---------------------------------------------------------------------- */

/* left-hand role list: reuses .picklist, adds the count on the right */
.picklist .item .cnt{flex-shrink:0;font-size:11px;color:var(--ink-faint);
  font-family:var(--mono);white-space:nowrap;}
.picklist .item.is-picked .cnt{color:var(--accent-hi);}

.locked-tag{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-hi);background:var(--accent-tint);border:1px solid var(--accent-ring);
  border-radius:var(--r-sm);padding:3px 8px;white-space:nowrap;}

/* the screens of ONE role, two or three to a row instead of a single column */
.capgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:0 16px;}
.capgrid .checkline{align-items:flex-start;}

.caphead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-faint);
  padding:14px 0 6px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;}
.caphead .say{text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--ink-faint);}

/* a rule stated as the journey the money makes */
.flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;}
.flow .node{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;
  background:var(--accent-tint);color:var(--accent-hi);font-size:12px;font-weight:600;white-space:nowrap;}
.flow .node.muted{background:var(--line-soft);color:var(--ink-soft);}
.flow .node.end{background:var(--income-bg);color:var(--income);}
.flow .arr{color:var(--ink-faint);font-size:11px;}

.helpnote.warn{border-left-color:var(--amber);background:var(--amber-bg);color:var(--amber);}
.helpnote.warn b{color:var(--amber);}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ----------------------------------------------------------------------
   Payments — the screen where money leaves the office.

   Three things were wrong with it and all three are shared components, so
   the fixes land on Collections and Cheques too:

   1. A VOIDED ROW WAS DIMMED TO 55%. The reason is the one thing on that row
      worth reading, and it was the hardest text on the screen — and on the
      "Corrected" tab every row is voided, so the entire list rendered greyed
      out. A void is a correction, not an erasure: it is read, not hidden.
   2. The toolbar's project filter was a BARE <select>. Nothing in the
      stylesheet matches a select outside .field, so an unstyled OS control
      sat in the middle of a hand-built bar.
   3. "Print / PDF" was a .dt__chip beside three .dt__chip filters. Same size,
      same shape, same row: it read as a fourth filter. It is a tool, so it
      goes behind a hairline, borderless, in the quieter ink.
   ---------------------------------------------------------------------- */

/* the count on a filter chip is a badge, not a bold word */
.dt__chip b{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--line-soft);color:var(--ink-soft);
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:10.5px;font-weight:600;}
.dt__chip.on b{background:var(--accent);color:#fff;}

/* a select that belongs to the toolbar it sits in */
.dt__sel{height:32px;max-width:190px;padding:0 8px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  font-family:var(--font);font-size:12px;font-weight:500;color:var(--ink-soft);}
.dt__sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}

/* tools, not filters — separated by a hairline and drawn without a border */
.dt__tools{display:flex;align-items:center;gap:4px;flex-shrink:0;
  padding-left:10px;margin-left:8px;border-left:1px solid var(--line-soft);}
.dt__tool{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;
  cursor:pointer;border:1px solid transparent;border-radius:var(--r-sm);background:none;
  font-family:var(--font);font-size:12px;font-weight:500;color:var(--ink-faint);}
.dt__tool:hover{background:var(--paper-raised);color:var(--ink-soft);}
.dt__tool svg{width:15px;height:15px;}

/* a corrected row: a red rail, struck figures, and a reason at full strength */
.dt tbody tr.is-void > td:first-child{box-shadow:inset 3px 0 0 var(--expense);}
.struck{text-decoration:line-through;text-decoration-color:var(--expense);
  text-decoration-thickness:1.5px;color:var(--ink-faint);}
.voidnote{margin-top:5px;font-size:11.5px;line-height:1.5;color:var(--expense);}
.voidnote b{font-weight:600;}

/* a KPI tile that goes somewhere */
.kpi--link{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:border-color .13s,box-shadow .13s;}
.kpi--link:hover{border-color:var(--accent-ring);box-shadow:var(--shadow-md);}
.kpi--link .label::after{content:" \2192";color:var(--accent);font-weight:600;}

/* ---------- entry forms in named parts ----------
   Fourteen fields in one undifferentiated two-column grid is a wall. The
   operator is holding a paper voucher; the form now asks in the order the
   paper reads — the number and the date, who and what for, then how much,
   with the figure given the weight it has on the voucher. */
.modal--wide{max-width:660px;}

.formsec{grid-column:1 / -1;display:flex;align-items:center;gap:10px;
  margin:8px 0 -2px;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);}
.formsec::after{content:"";flex:1;height:1px;background:var(--line-soft);}
.formgrid > .formsec:first-child{margin-top:0;}

/* the amount is the one figure on the form — it should not look like the
   voucher number typed above it */
.field.amount input{height:48px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:20px;font-weight:600;letter-spacing:-.01em;}
.field .echo{margin-top:7px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--ink-soft);}
.field .echo b{color:var(--ink);font-weight:600;}
.field .echo .words{display:block;font-family:var(--font);font-size:11.5px;
  color:var(--ink-faint);margin-top:3px;}
.field .hint{margin-top:6px;font-size:11.5px;color:var(--ink-faint);line-height:1.5;}
.field .hint a{color:var(--accent);text-decoration:underline;}
.field .ok{margin-top:6px;font-size:12px;color:var(--income);font-weight:500;}
.field input[type=file]{height:auto;padding:9px 12px;font-size:13px;color:var(--ink-soft);}
.field .withbtn{display:flex;gap:8px;align-items:center;}
.field .withbtn > select{flex:1;min-width:0;}

/* a panel that opens inside the form — a square hard-edged box in a design
   with 8px corners */
.subpanel{grid-column:1 / -1;background:var(--paper-raised);
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:13px 14px;}
.subpanel .sp-title{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:10px;}
.subpanel .formgrid{gap:12px 14px;}
.subpanel .hint{margin-top:9px;}

/* a checkbox that is a decision, not a field label */
.checkfield{grid-column:1 / -1;display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);transition:border-color .13s,background .13s;}
.checkfield:hover{background:var(--paper-raised);}
.checkfield.is-on{border-color:var(--accent);background:var(--accent-tint);}
.checkfield input{width:auto;height:auto;margin:2px 0 0;flex-shrink:0;}
.checkfield .t{display:block;font-size:13.5px;color:var(--ink);line-height:1.35;font-weight:500;}
.checkfield .s{display:block;font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.45;}
/* An inset rail on the first CELL is a rail down the left of the row — but
   in the stacked phone layout the cells are blocks, so it would be a stub in
   one corner. There, the card's own border carries it. */
@media (max-width:640px){
  .stack-sm tbody tr.is-void > td:first-child{box-shadow:none;}
  .stack-sm tbody tr.is-void{border-color:var(--expense);}
}

/* ----------------------------------------------------------------------
   One tab strip, two halves.

   Payments had two navigation controls at two different levels answering the
   same question. Filter chips inside the table toolbar chose the cut of the
   ledger; stacked permanently ABOVE the table, two whole cards held the
   operator's drafts and the entries he had sent. So on a normal morning he
   scrolled past a hundred and eighty pixels of his own paperwork to reach the
   payments, and "which list am I looking at" was asked twice, in two
   vocabularies, neither of which looked like a tab.

   The divider is the point of the control: left of it is money that is in the
   books, right of it is money that is in no balance at all yet.
   ---------------------------------------------------------------------- */
.tabbtn .cnt{display:inline-block;margin-left:6px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;color:var(--ink-faint);}
.tabbtn.active .cnt{color:var(--accent);}
.tabbtn .pill{margin-left:6px;vertical-align:1px;}
.tabbar .tabsplit{margin-left:auto;align-self:center;padding:0 2px 0 18px;
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;}

/* the summary strip carries the screen's one action */
.totalsbar .act{margin-left:auto;align-self:center;}

@media (max-width:820px){
  /* The caption needs a row of its own at this width and is not worth one —
     the amber counts already say these two are different. */
  .tabbar .tabsplit{display:none;}
  .totalsbar .act{margin-left:0;width:100%;}
  .totalsbar .act .btn{width:100%;}
}