/* ============================================================================
   MoneyWise Operating Layer — core design system
   Brand source: moneywisepayroll.com (live theme values, verified 2026)
     accent / primary ....... hsl(227.81,100%,25.1%)  #001A80
     dark accent ............ hsl(232,100%,23%)       #001974
     indigo tint ............ #2E3182
     ground ................. #F6F6F6   (from site custom.css)
     border radius .......... 0px       (site buttons + inputs are square)
     heading + body face .... EB Garamond  (the face the site actually loads;
                              Adobe Garamond Pro is the Typekit sibling and is
                              declared first in the site's own stack)
   Ledger face: a neutral grotesque with tabular numerals. Garamond carries the
   brand voice in headings, prose and buttons; it is not legible at 11px in a
   dense reconciliation table, and this application is mostly table.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* brand */
  --navy:#001A80; --navy-deep:#001974; --indigo:#2E3182;
  --navy-08:rgba(0,26,128,.08); --navy-05:rgba(0,26,128,.05); --navy-03:rgba(0,26,128,.03);

  /* surfaces */
  --paper:#FFFFFF; --ground:#F6F6F6; --ground-warm:#FAFAF7; --deep:#000B33;

  /* ink */
  --ink:#0C0E1A; --muted:#5A5F73; --faint:#8A8FA3;

  /* rules — navy-tinted hairlines, never grey */
  --rule:#C9CEE4; --rule-soft:#DFE2EE; --rule-faint:#ECEEF5;

  /* semantic — status of work, not decoration */
  --ok:#0F7A3D;    --ok-bg:#E7F4EC;
  --warn:#9A6400;  --warn-bg:#FDF3DE;
  --alert:#B3121B; --alert-bg:#FBE9EA;
  --info:#001A80;  --info-bg:#E7EAF6;

  /* motion */
  --fast:120ms; --base:220ms; --slow:380ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* type */
  --serif:'EB Garamond','Adobe Garamond Pro',Garamond,Georgia,serif;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--ui); font-size:13px; line-height:1.5;
  color:var(--ink); background:var(--ground);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--navy);text-decoration:none}
img{max-width:100%}
::selection{background:rgba(0,26,128,.15)}

/* ---------- type ---------------------------------------------------------- */
.ser{font-family:var(--serif)}
.hd{font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.2;letter-spacing:-.005em;text-wrap:balance}
.hd.xl{font-size:34px} .hd.lg{font-size:25px} .hd.md{font-size:19px} .hd.sm{font-size:16px}
.prose{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.prose.sm{font-size:14.5px;line-height:1.55}

/* label — the uppercase spine of the whole interface */
.lab{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.lab.xs{font-size:8.5px;letter-spacing:.11em}
.lab.md{font-size:10.5px} .lab.lg{font-size:12px;letter-spacing:.1em}
.lab.navy{color:var(--navy)} .lab.faint{color:var(--faint)}
.lab.ok{color:var(--ok)} .lab.warn{color:var(--warn)} .lab.alert{color:var(--alert)}

/* numerals — tabular everywhere a number can be compared to another number */
.num{font-family:var(--ui);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--navy);line-height:1}
.num.xl{font-size:40px;font-weight:700} .num.lg{font-size:28px;font-weight:700}
.num.md{font-size:19px} .num.sm{font-size:14px}
.tnum{font-variant-numeric:tabular-nums}

.sm{font-size:11.5px} .xs{font-size:10.5px}
.muted{color:var(--muted)} .faint{color:var(--faint)} .navy{color:var(--navy)}
.ok{color:var(--ok)} .warn{color:var(--warn)} .alert{color:var(--alert)}
.b{font-weight:600} .bb{font-weight:700}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strike{text-decoration:line-through;text-decoration-color:var(--alert)}

/* ---------- layout helpers ------------------------------------------------ */
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wrap{flex-wrap:wrap}
.hidden{display:none!important}
.rule{height:1px;background:var(--rule-soft);flex:none}
.rule-strong{height:1px;background:var(--rule);flex:none}
.rule-navy{height:2px;background:var(--navy);flex:none}
.vrule{width:1px;background:var(--rule-soft);align-self:stretch;flex:none}
.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--rule)}
.scroll::-webkit-scrollbar-track{background:transparent}

/* ---------- status ---------------------------------------------------------
   Status is set in type, not in pills. A list of nine identical pills carries
   no information; the one row without one does. The filled badge is reserved
   for a single primary state per screen, and nothing else. */
.st{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.st.ok{color:var(--ok)} .st.warn{color:var(--warn)} .st.alert{color:var(--alert)} .st.info{color:var(--navy)}
.st.quiet{color:var(--faint);font-weight:600}

/* the one loud state per screen */
.badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;
  font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;line-height:1;border-radius:0;
  background:var(--navy);color:#fff}
.badge.ok{background:var(--ok)} .badge.warn{background:var(--warn)}
.badge.alert{background:var(--alert)} .badge.info{background:var(--navy)}
.badge.neutral{background:transparent;color:var(--faint);border:1px solid var(--rule)}
.badge.solid{background:var(--navy)}

/* posture — the report's four postures, rendered as a first-class object */
.posture{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);
  font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.posture i{width:14px;height:8px;flex:none;position:relative;background:var(--rule);display:block}
.posture.in{color:var(--navy)}    .posture.in i{background:var(--navy)}
.posture.on{color:var(--indigo)}  .posture.on i{background:linear-gradient(90deg,var(--indigo) 55%,var(--rule) 55%)}
.posture.only{color:var(--warn)}  .posture.only i{background:var(--warn)}
.posture.none{color:var(--faint)} .posture.none i{background:var(--rule)}

/* ---------- buttons — square, per the live brand -------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 18px;border-radius:0;border:1px solid transparent;
  font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;user-select:none;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-deep)}
.btn.outline{border-color:var(--rule);color:var(--navy);background:var(--paper)}
.btn.outline:hover{border-color:var(--navy);background:var(--navy-03)}
.btn.ghost{color:var(--muted)}
.btn.ghost:hover{color:var(--navy);background:var(--navy-05)}
.btn.danger{background:var(--alert);color:#fff}
.btn.danger:hover{background:#8E0E15}
.btn.onDark{border-color:rgba(255,255,255,.34);color:#fff}
.btn.onDark:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn.lg{height:46px;padding:0 24px;font-size:17px}
.btn.sm{height:31px;padding:0 13px;font-size:13.5px}
.btn.xs{height:26px;padding:0 10px;font-size:12.5px}
.btn.block{width:100%}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.link{font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer}
.link:hover{color:var(--navy)}

/* ---------- ruled rows — the primary list idiom --------------------------- */
.rows{display:flex;flex-direction:column}
.rline{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule-faint)}
.rline.click{cursor:pointer;transition:background var(--fast)}
.rline.click:hover{background:var(--navy-03)}
.rline.sel{background:var(--navy-05);box-shadow:inset 3px 0 0 var(--navy)}
.rline.flag{box-shadow:inset 3px 0 0 var(--alert)}
/* a run that stopped reads heavier than one that did not */
.rline .stake{font-family:var(--ui);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--alert);white-space:nowrap}
.rline.calm{color:var(--muted)}
.rline.calm .ser{color:var(--muted);font-weight:400}

/* ---------- sheet: a bordered surface used sparingly ---------------------- */
.sheet{background:var(--paper);border:1px solid var(--rule-soft)}
.sheet.plain{border:0}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--rule-soft)}

/* ---------- evidence block — why the machine says what it says ------------ */
.evid{background:var(--ground-warm);border-left:2px solid var(--navy);padding:11px 14px}
.evid.alert{border-left-color:var(--alert)}
.evid.warn{border-left-color:var(--warn)}
.evid .q{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--ink);line-height:1.5}

/* ---------- ledger masthead ------------------------------------------------
   A report header, not a row of tiles: figures set in the type, separated by
   hairlines, reading left to right as a sentence about the day. */
.ledger{border-top:2px solid var(--navy);border-bottom:1px solid var(--rule);
  display:flex;align-items:stretch;margin-bottom:26px;background:var(--paper)}
.ledger .cell{padding:15px 22px 16px;display:flex;flex-direction:column;gap:5px;flex:none}
.ledger .cell+.cell{border-left:1px solid var(--rule-faint)}
.ledger .cell.wide{flex:1;min-width:0}
.ledger .k{font-family:var(--ui);font-size:8.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint)}
.ledger .v{font-family:var(--ui);font-size:29px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.018em;color:var(--navy);line-height:1.05}
.ledger .v.alert{color:var(--alert)} .ledger .v.ok{color:var(--ok)}
.ledger .v small{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:5px}
.ledger .n{font-family:var(--serif);font-size:14px;line-height:1.4;color:var(--muted);max-width:34ch}

/* ---------- meters -------------------------------------------------------- */
.meter{height:5px;background:var(--rule-faint);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--navy);
  transition:width var(--slow) var(--ease)}
.meter i.ok{background:var(--ok)} .meter i.warn{background:var(--warn)} .meter i.alert{background:var(--alert)}

/* ---------- toast --------------------------------------------------------- */
.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:900;pointer-events:none;width:max-content;max-width:min(560px,90vw)}
.toast{background:var(--deep);color:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px;
  border-left:3px solid var(--ok);font-size:12.5px;line-height:1.45;animation:tin .3s var(--ease);pointer-events:auto}
.toast.alert{border-left-color:var(--alert)} .toast.warn{border-left-color:var(--warn)}
.toast .who{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9AA6D8;flex:none}
.toast.out{animation:tout .26s var(--ease) forwards}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}
@keyframes tout{to{opacity:0;transform:translateY(6px)}}

/* confidence reads as a figure with a qualifier; a progress bar for 97% is noise */
.conf{font-family:var(--ui);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.conf.hi{color:var(--ok)} .conf.mid{color:var(--warn)} .conf.lo{color:var(--alert)}
.conf i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-left:6px;color:var(--faint)}

/* ---------- misc ---------------------------------------------------------- */
.fade{animation:fade .26s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(5px)}}
.spin{width:13px;height:13px;border:2px solid var(--rule);border-top-color:var(--navy);
  border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:var(--navy);color:#fff;font-family:var(--ui);font-weight:700;
  width:26px;height:26px;font-size:10.5px;letter-spacing:.02em}
/* where a face adds nothing, the initials are just set in the type */
.by{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.by.sys{color:var(--rule)}
.avatar.lg{width:34px;height:34px;font-size:12.5px}
.avatar.tax{background:var(--indigo)} .avatar.owner{background:var(--deep)}
.avatar.cs{background:#4A4E86} .avatar.sys{background:var(--muted)}
mark{background:var(--warn-bg);color:inherit;padding:0 2px}
.kbd{font-family:var(--ui);font-size:10px;font-weight:600;border:1px solid var(--rule);
  padding:1px 5px;color:var(--muted);background:var(--paper)}