/* STORE-4 screen styles: money
   Money (invoices/list.html) and chasing (invoices/owed.html, chase_draft.html, chase_settings.html): the graphite .hero with .meta, .figure.late. NOT invoices/print.html.
   Loaded on every app page after jeevz.css (core/templates/core/base.html), so scope every rule to this screen's own classes.
   Read --jz-* tokens only (see jeevz.css section 1). Never read --ink --text --font --brand --accent --on-brand --on-accent
   --needs-bg --needs-fg (the firm brand sets those). Local url() only, relative to this folder (e.g. url("../mark.ea52a70d0fb1.svg")).
   Spec: streams/jeevz/app/docs/design-system.md. */

/* ===== Pass 2 (31 Oct): the money area's own small system, scoped to .mny (invoices/base.html, records/base.html).
   Lessons in docs/design-learnings.md "## money". Type 34/22/17/15/13, 4/8 grid, 20px gutter, radius 16 (groups) and 24 (hero),
   shadow not borders, system font with tabular numbers (never mono), one accent per screen. */
.mny{--m-g:20px;--m-r:16px;--m-sh:0 1px 2px rgba(23,33,29,.05),0 8px 24px -12px rgba(23,33,29,.16);--m-hair:var(--jz-hair);
  --m-chev:var(--jz-chev);--m-tile:var(--jz-soft);padding:var(--jz-s2) var(--m-g) var(--jz-s8)}
.mny :is(b,small,span,p){font-variant-numeric:tabular-nums}
.mny .m-ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* back link: a drawn chevron, not the "‹" character */
.mny .m-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:var(--jz-s1) 0 0 -6px;padding:0 8px 0 0;font:500 17px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
.mny .m-back .m-ic{width:22px;height:22px;stroke-width:2.25}

/* title row: large title, the "new" action on the right (never pinned over a list) */
.mny .m-head{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s3) 0 var(--jz-s5)}
.mny .m-h1{margin:0;font:800 34px/1.1 var(--jz-sans);letter-spacing:-.03em;color:var(--jz-ink)}
.mny .m-sub{margin:-12px 0 var(--jz-s6);font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}
.mny .m-new{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:var(--jz-card);box-shadow:var(--m-sh);color:var(--jz-forest);font:600 15px/1 var(--jz-sans);text-decoration:none;white-space:nowrap}
.mny .m-new .m-ic{width:20px;height:20px;stroke-width:2.25}
.mny .m-new:active{transform:scale(.97)}

/* the hero: one dark card, one lime number */
.mny .m-hero{position:relative;overflow:hidden;margin:0 0 var(--jz-s8);padding:var(--jz-s6) var(--jz-s6) var(--jz-s5);border-radius:24px;
  background:radial-gradient(130% 120% at 100% 0%,var(--jz-night-2),var(--jz-night) 60%);color:var(--jz-on-night);box-shadow:0 24px 40px -28px rgba(7,9,13,.7)}
.mny .m-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:220px;height:220px;border-radius:50%;background:var(--jz-grad);opacity:.13;filter:blur(48px);pointer-events:none}
.mny .m-hero-k{display:block;font:500 15px/1.3 var(--jz-sans);color:var(--jz-night-muted)}
.mny .m-hero-n{display:block;margin:var(--jz-s2) 0 var(--jz-s1);font:800 44px/1.05 var(--jz-sans);letter-spacing:-.035em;color:var(--jz-hero-num);overflow-wrap:anywhere}
.mny .m-hero-n .p{font-size:.55em;font-weight:700;letter-spacing:-.02em}
.mny .m-hero.zero .m-hero-n{color:var(--jz-on-night)}
.mny .m-hero-s{margin:0;font:400 15px/1.4 var(--jz-sans);color:var(--jz-night-muted)}
.mny .m-stats{display:flex;margin:var(--jz-s5) calc(-1 * var(--jz-s6)) calc(-1 * var(--jz-s5));border-top:1px solid var(--jz-night-line)}
.mny .m-stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;padding:var(--jz-s4) var(--jz-s6) var(--jz-s5);color:var(--jz-on-night);text-decoration:none}
.mny .m-stat+.m-stat{border-left:1px solid var(--jz-night-line)}
.mny .m-stat b{font:700 22px/1.15 var(--jz-sans);letter-spacing:-.02em;color:var(--jz-on-night);overflow-wrap:anywhere}
.mny .m-stat small{display:inline-flex;align-items:center;gap:2px;font:500 13px/1.3 var(--jz-sans);color:var(--jz-night-muted)}
.mny .m-stat small .m-ic{width:14px;height:14px;stroke-width:2.5}
.mny .m-stat.is-late b{color:var(--jz-night-late)}
.mny .m-stat.is-late b::before{content:"\25B2";display:inline-block;margin-right:6px;font-size:.5em;vertical-align:.25em}
.mny .m-rb .late::before{font-size:.7em;vertical-align:.1em}
.mny a.m-stat:active{background:rgba(255,255,255,.06)}

/* light summary card (Who owes you, Receipts) */
.mny .m-sum{margin:0 0 var(--jz-s8);padding:var(--jz-s6) var(--jz-s5) var(--jz-s5);border-radius:24px;background:var(--jz-card);box-shadow:var(--m-sh)}
.mny .m-sum-k{display:block;font:500 15px/1.3 var(--jz-sans);color:var(--jz-muted)}
.mny .m-sum-n{display:block;margin:var(--jz-s2) 0 var(--jz-s1);font:800 44px/1.05 var(--jz-sans);letter-spacing:-.035em;color:var(--jz-ink);overflow-wrap:anywhere}
.mny .m-sum-n .p{font-size:.55em;font-weight:700;letter-spacing:-.02em}
.mny .m-sum.is-late .m-sum-n{color:var(--jz-red)}
.mny .m-sum-s{margin:0;font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}
.mny .m-sum .m-stats{margin:var(--jz-s5) calc(-1 * var(--jz-s5)) 0;border-top:1px solid var(--m-hair)}
.mny .m-sum .m-stat{padding:var(--jz-s4) var(--jz-s5) 0;color:var(--jz-ink)}
.mny .m-sum .m-stat+.m-stat{border-left:1px solid var(--m-hair)}
.mny .m-sum .m-stat b{color:var(--jz-ink)}
.mny .m-sum .m-stat small{color:var(--jz-muted)}
.mny .m-ok{display:flex;align-items:center;gap:var(--jz-s4)}
.mny .m-ok .m-tick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--jz-soft);color:var(--jz-forest)}
.mny .m-ok b{display:block;font:700 22px/1.2 var(--jz-sans);letter-spacing:-.02em;color:var(--jz-ink)}
.mny .m-ok small{display:block;margin-top:2px;font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}

/* section header: sentence case, only where a list splits */
.mny .m-sh{display:flex;justify-content:space-between;margin:0 0 var(--jz-s2);padding:0 var(--jz-s4);font:600 13px/1.4 var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-muted)}

/* grouped list: one white surface, hairlines inset to the text */
.mny .m-group{display:block;margin:0 0 var(--jz-s8);padding:0;background:var(--jz-card);border:0;border-radius:var(--m-r);box-shadow:var(--m-sh);overflow:hidden}
.mny .m-row,.mny .m-link{position:relative;display:flex;align-items:center;gap:var(--jz-s3);width:100%;box-sizing:border-box;margin:0;padding:var(--jz-s3) var(--jz-s4);background:none;border:0;color:var(--jz-ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.mny .m-row{min-height:72px}
.mny .m-link{min-height:56px;padding-top:10px;padding-bottom:10px}
.mny :is(.m-row,.m-link,.m-item)+:is(.m-row,.m-link,.m-item,form)::before,.mny form+:is(.m-row,.m-link,.m-item,form)::before,
.mny .m-group>form+form::before{content:"";position:absolute;top:0;left:var(--m-inset,60px);right:0;height:1px;background:var(--m-hair)}
.mny .m-group>form{position:relative;margin:0}
.mny .m-group .m-row{--m-inset:68px}
.mny :is(.m-row,.m-link):active{background:var(--jz-field)}
.mny .m-link>.m-ic:last-child,.mny .m-row>.m-ic:last-child{width:16px;height:16px;stroke:var(--m-chev);stroke-width:2.5;margin-left:auto}
.mny .m-tile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--m-tile);color:var(--jz-forest)}
.mny .m-tile .m-ic{width:20px;height:20px;stroke-width:1.9}
.mny .m-tile.red{background:var(--jz-red-soft);color:var(--jz-red)}
.mny .m-lt{flex:1;min-width:0;font:400 17px/1.3 var(--jz-sans);color:var(--jz-ink)}
.mny .m-lt.red{color:var(--jz-red)}
.mny .m-lt small{display:block;margin-top:2px;font:400 13px/1.35 var(--jz-sans);color:var(--jz-muted)}
.mny .m-val{flex:none;font:400 17px/1.3 var(--jz-sans);color:var(--jz-muted)}
.mny .m-link.go .m-lt{font-weight:600;color:var(--jz-forest)}

/* row body: title 17/600, one muted line under it; value right */
.mny .m-rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mny .m-rb>b{font:600 17px/1.3 var(--jz-sans);color:var(--jz-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mny .m-rb>small{font:400 15px/1.35 var(--jz-sans);color:var(--jz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mny .m-rb .late{color:var(--jz-red);font-weight:600}
.mny .m-rt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mny .m-rt>b{font:600 17px/1.3 var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink)}
.mny .m-st{display:inline-flex;align-items:center;gap:5px;font:500 13px/1.2 var(--jz-sans);color:var(--jz-muted)}
.mny .m-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mny .m-st.st-sent{color:var(--jz-forest)}
.mny .m-st.st-ready{color:var(--jz-info)}
.mny .m-st.st-draft::before{background:none;box-shadow:inset 0 0 0 1.5px currentColor}
.mny .m-st.st-paid{color:var(--jz-ok)}
.mny .m-st.st-void{color:var(--jz-faint)}

/* avatars: six soft tints picked from the initial, ink letter */
.mny .m-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#e3f5ea;color:var(--jz-ink);font:600 17px/1 var(--jz-sans)}
.mny .m-av:is([data-i=B],[data-i=H],[data-i=N],[data-i=T],[data-i=Z]){background:#e6efff}
.mny .m-av:is([data-i=C],[data-i=I],[data-i=O],[data-i=U]){background:#fdeee0}
.mny .m-av:is([data-i=D],[data-i=J],[data-i=P],[data-i=V]){background:#f3e8fb}
.mny .m-av:is([data-i=E],[data-i=K],[data-i=Q],[data-i=W]){background:#fdf3c9}
.mny .m-av:is([data-i=F],[data-i=L],[data-i=R],[data-i=X]){background:#fde7ec}

/* footnote: the safety line, quiet and in the flow */
.mny .m-foot{display:flex;align-items:flex-start;gap:8px;margin:0 0 var(--jz-s3);padding:0 var(--jz-s4);font:400 13px/1.45 var(--jz-sans);color:var(--jz-muted)}
.mny .m-foot .m-ic{width:16px;height:16px;margin-top:1px;stroke:var(--jz-forest);stroke-width:2}
.mny .m-foot+.m-foot{margin-top:-4px}

/* buttons inside the flow */
.mny .m-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:0;padding:0 20px;border:0;border-radius:999px;background:var(--jz-ink);color:#fff;font:600 17px/1 var(--jz-sans);text-decoration:none;cursor:pointer}
.mny .m-btn.grad{background:var(--jz-grad);color:var(--jz-on-grad)}
.mny .m-btn.soft{background:var(--jz-field);color:var(--jz-ink)}
.mny .m-btn:active{transform:scale(.98)}
.mny .m-btn .m-ic{width:22px;height:22px}

/* forms: label rows inside a group, no boxes inside boxes */
.mny .m-f{display:block;position:relative;margin:0;padding:12px var(--jz-s4) 12px;font:500 13px/1.3 var(--jz-sans);color:var(--jz-muted)}
.mny .m-f+.m-f::before,.mny .m-f+.m-sw::before,.mny .m-sw+.m-f::before,.mny .m-sw+.m-sw::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--m-hair)}
.mny.mny.mny.mny .m-f :is(input,select,textarea){display:block;width:100%;min-height:32px;margin:4px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:0;font:500 17px/1.35 var(--jz-sans);color:var(--jz-ink);-webkit-appearance:none;appearance:none}
.mny.mny.mny.mny .m-f select{padding-right:28px;background:none;text-overflow:ellipsis}
.mny .m-f.pick::after{content:"";position:absolute;right:20px;bottom:24px;width:8px;height:8px;border:solid var(--m-chev);border-width:0 2px 2px 0;transform:rotate(45deg)}
.mny.mny.mny.mny .m-f textarea{min-height:72px;resize:none}
.mny .m-f :is(input,textarea)::placeholder{color:#a3aba4}
.mny .m-f:focus-within{background:#fbfcfa}
.mny .m-f:focus-within::after{border-color:var(--jz-forest)}
.mny .m-sw{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);min-height:56px;margin:0;padding:8px var(--jz-s4);font:400 17px/1.3 var(--jz-sans);color:var(--jz-ink);cursor:pointer}
.mny .m-sw input{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px;height:31px;margin:0;padding:0;border:0;border-radius:999px;background:var(--jz-switch-off);transition:background .2s;cursor:pointer}
.mny .m-sw input::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .2s}
.mny .m-sw input:checked{background:var(--jz-forest)}
.mny .m-sw input:checked::after{transform:translateX(20px)}
.mny .m-sw input:focus-visible{outline:3px solid rgba(48,109,85,.4);outline-offset:2px}
.mny .m-or{margin:0 0 var(--jz-s2);padding:0 var(--jz-s4);font:600 13px/1.4 var(--jz-sans);color:var(--jz-muted)}

/* Who owes you: the row, then its reminder under it */
.mny .m-owe{position:relative;padding-bottom:var(--jz-s4)}
.mny .m-owe+.m-owe::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--m-hair)}
.mny .m-owe .m-row{min-height:64px;padding-bottom:4px}
.mny .m-owe-go{width:auto;min-height:44px;margin:var(--jz-s1) var(--jz-s4) 0;font-size:15px}
.mny .m-owe-why{display:block;padding:0 var(--jz-s4);font:400 15px/1.35 var(--jz-sans);color:var(--jz-muted)}
.mny .m-quiet{margin:var(--jz-s5) 0 0;text-align:center}
.mny .m-quiet button{min-height:44px;padding:0 16px;border:0;background:none;font:500 15px/1 var(--jz-sans);color:var(--jz-forest);cursor:pointer}
.mny button.m-link{-webkit-appearance:none;appearance:none}
.mny .m-group>form>.m-link{border-radius:0}

/* Receipts home */
.mny .rec-now .m-stats{margin-top:var(--jz-s3);border-top:0}
.mny .rec-now .m-stat{padding-top:0}
.mny .rec-now .m-stat b{font-size:28px;font-weight:800;letter-spacing:-.03em}
.mny .rec-state{display:flex;align-items:center;gap:6px;margin:var(--jz-s5) 0 var(--jz-s4);padding-top:var(--jz-s4);border-top:1px solid var(--m-hair)}
.mny .rec-state .m-ic{width:18px;height:18px;stroke:var(--jz-ok);stroke-width:2.5}
.mny .m-warn{color:var(--jz-amber);font-weight:600}
.mny .rec-q{min-height:64px;--m-inset:16px}

/* invoice detail */
.mny .m-dhead{margin:var(--jz-s3) 0 var(--jz-s6)}
.mny .m-dhead .m-h1{margin:6px 0 4px;font-size:30px}
.mny .m-dhead p{margin:0;font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}
.mny .m-dhead .m-st{font-size:15px;font-weight:600}
.mny .m-item{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:64px;padding:var(--jz-s3) var(--jz-s4)}
.mny .m-lines{--m-inset:16px}
.mny .m-item+.m-item::before{left:var(--jz-s4)}
.mny .m-item .m-rb>b{white-space:normal}
.mny .m-x{flex:none;margin:0 -6px 0 0}
.mny .m-x button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--jz-faint);cursor:pointer}
.mny .m-x button:active{background:var(--jz-field)}
.mny .m-x .m-ic{width:22px;height:22px}
.mny .m-none{margin:0;padding:var(--jz-s4);font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}
.mny .m-tots{margin:0;padding:var(--jz-s3) var(--jz-s4) var(--jz-s4);background:#fafbf9;box-shadow:inset 0 1px 0 var(--m-hair)}
.mny .m-tots>div{display:flex;justify-content:space-between;gap:var(--jz-s3);padding:4px 0;font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}
.mny .m-tots>div>span:last-child{color:var(--jz-ink)}
.mny .m-tots>.grand{align-items:baseline;margin-top:var(--jz-s2);padding-top:var(--jz-s3);border-top:1px solid var(--m-hair);font:600 17px/1.2 var(--jz-sans);color:var(--jz-ink)}
.mny .m-tots>.grand>span:last-child{font:800 28px/1.1 var(--jz-sans);letter-spacing:-.03em}
.mny .m-pair{position:relative;display:grid;grid-template-columns:1fr 1fr}
.mny .m-pair::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--m-hair)}
.mny .m-pair .m-f+.m-f::before{top:12px;bottom:12px;left:0;right:auto;width:1px;height:auto}
.mny .m-pair+.m-f::before,.mny .m-f+.m-pair::before,.mny :is(.m-f,.m-sw)+.m-link::before,.mny .m-sw+.m-link::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--m-hair)}
.mny .m-pair+.m-sw::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--m-hair)}
.mny .m-group>form>.m-f:first-of-type::before{content:none}
.mny details.m-fold>summary{list-style:none}
.mny details.m-fold>summary::-webkit-details-marker{display:none}
.mny details.m-fold>summary>.m-ic:last-child{transition:transform .2s}
.mny details.m-fold[open]>summary>.m-ic:last-child{transform:rotate(90deg)}
.mny details.m-fold[open]>form{position:relative;box-shadow:inset 0 1px 0 var(--m-hair)}
.mny .m-sum.is-warn .m-sum-n{color:var(--jz-amber)}
.mny .m-foot .m-ic[viewBox]{flex:none}
.mny .alert{margin:0 0 var(--jz-s5)}

/* pinned tray on forms and single items (dock comes from jeevz.css; only the button look is set here) */
.mny .dock .btn{min-height:56px;font:600 17px/1 var(--jz-sans)}

/* quarter: earlier / later as two quiet pills */
.mny .rec-step{display:flex;justify-content:space-between;gap:var(--jz-s2);margin:calc(-1 * var(--jz-s3)) 0 var(--jz-s5)}
.mny .rec-step a{display:inline-flex;align-items:center;gap:2px;min-height:40px;padding:0 14px 0 8px;border-radius:999px;background:var(--jz-card);box-shadow:var(--m-sh);font:500 15px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
.mny .rec-step a.nx{margin-left:auto;padding:0 8px 0 14px}
.mny .rec-step .m-ic{width:18px;height:18px;stroke-width:2.25}
.mny .m-dhead .m-h1:only-child{font-size:26px;line-height:1.2;letter-spacing:-.025em}
.mny .m-sh span{font-weight:600;color:var(--jz-ink)}
.mny a.m-item{color:var(--jz-ink);text-decoration:none}
.mny a.m-item:active{background:var(--jz-field)}
.mny .m-item>.m-ic:last-child{width:16px;height:16px;margin-left:-4px;stroke:var(--m-chev);stroke-width:2.5}
.mny .m-item+.m-link::before,.mny .m-none+.m-link::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--m-hair)}

/* accountant checklist: an empty ring, or a filled tick disc */
.mny .rec-chk{align-items:flex-start;min-height:0;padding-top:14px;padding-bottom:14px}
.mny .rec-chk .m-rb>b{white-space:normal;font-weight:500}
.mny .rec-chk .m-rb>small{white-space:normal}
.mny .rec-chk.ok .m-rb>b{color:var(--jz-muted)}
.mny .rec-tick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.75px #c3c9c2;color:#fff}
.mny .rec-chk.ok .rec-tick{background:var(--jz-ok);box-shadow:none}
.mny .rec-tick .m-ic{width:16px;height:16px;stroke-width:2.75}
.mny #checklist{--m-inset:52px}
.mny #checklist .m-item+.m-item::before{left:52px}

/* expense form: the receipt photo first, as one big tappable card */
.mny .rec-snap{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 var(--jz-s6);padding:var(--jz-s6) var(--jz-s5) var(--jz-s5);border-radius:24px;background:var(--jz-card);box-shadow:var(--m-sh);text-align:center;cursor:pointer}
.mny .rec-cam{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:var(--jz-s2);border-radius:20px;background:var(--jz-soft);color:var(--jz-forest)}
.mny .rec-cam .m-ic{width:30px;height:30px;stroke-width:1.75}
.mny .rec-snap b{font:700 20px/1.25 var(--jz-sans);letter-spacing:-.015em;color:var(--jz-ink)}
.mny .rec-snap small{font:400 13px/1.4 var(--jz-sans);color:var(--jz-muted)}
.mny.mny .rec-snap input[type=file]{width:100%;min-height:0;margin:var(--jz-s3) 0 0;padding:0;border:0;border-radius:0;background:none;font:400 15px/1.3 var(--jz-sans);color:var(--jz-muted);text-align:center}
.mny.mny .rec-snap input[type=file]::file-selector-button{min-height:40px;margin:0 10px 0 0;padding:0 16px;border:0;border-radius:999px;background:var(--jz-field);color:var(--jz-ink);font:600 15px var(--jz-sans)}
.mny .rec-snap:active{transform:scale(.99)}
.mny .rec-talk{margin:calc(-1 * var(--jz-s5)) 0 var(--jz-s6);padding:0 var(--jz-s4)}
.mny .rec-talk .note{font-size:13px;line-height:1.45}

/* quarters choice: one group, a tick on the chosen row */
.mny .rec-pick{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:72px;padding:var(--jz-s3) var(--jz-s4);cursor:pointer}
.mny .rec-pick+.rec-pick::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--m-hair)}
.mny .rec-pick span{flex:1;display:flex;flex-direction:column;gap:2px}
.mny .rec-pick b{font:600 17px/1.3 var(--jz-sans)}
.mny .rec-pick small{font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}
.mny.mny .rec-pick input{-webkit-appearance:none;appearance:none;flex:none;width:24px;height:24px;margin:0;border-radius:50%;box-shadow:inset 0 0 0 1.75px #c3c9c2;background:none}
.mny.mny .rec-pick input{position:relative}
.mny.mny .rec-pick input:checked{background:var(--jz-forest);box-shadow:none}
.mny.mny .rec-pick input:checked::after{content:"";position:absolute;left:8.5px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* send screens and small pages */
.mny .m-stack{display:flex;flex-direction:column;gap:var(--jz-s2);margin:calc(-1 * var(--jz-s5)) 0 var(--jz-s8)}
.mny .m-stack .alert{margin:0}
.mny .m-done{display:block;min-height:18px;text-align:center;font:500 13px/1.4 var(--jz-sans);color:var(--jz-forest)}
.mny .m-done:empty{display:none}
.mny .m-btn.danger{background:var(--jz-red);color:#fff}
.mny .m-gap{margin-top:var(--jz-s3)}
.mny .m-sum.m-ok{margin-bottom:var(--jz-s5)}
.mny .m-sum.m-ok+.m-btn{margin-top:0}
.mny .m-sw .m-lt{font-size:17px}
.mny .m-sw .m-lt small{font-size:13px}
.mny .m-late-n{color:var(--jz-red);font-weight:600}
.mny .m-st.st-pending{color:var(--jz-amber)}
.mny .m-st.st-approved{color:var(--jz-info)}
.mny .m-st.st-skipped{color:var(--jz-faint)}
.mny.mny.mny.mny .m-f textarea[rows="14"]{min-height:280px;line-height:1.45}
.mny.mny.mny.mny .m-f :is(input,textarea)[readonly]{color:var(--jz-ink);background:none}
.mny .m-dhead .m-h1{overflow-wrap:anywhere}
.mny a.m-item .m-rb>small,.mny .m-lines .m-rb>small{white-space:normal}
.mny .rec-talk .talk-btn{min-height:44px;border:0;background:var(--jz-card);box-shadow:var(--m-sh);font:600 15px/1 var(--jz-sans);color:var(--jz-ink)}
.mny.mny.mny.mny .m-f select:has(option[value=""]:checked){color:#a3aba4}
.mny .m-st.st-late{color:var(--jz-red)}
.mny.mny.mny.mny .m-f.big input{min-height:40px;font:700 28px/1.2 var(--jz-sans);letter-spacing:-.02em}

/* ===== Pass 3 (31 Oct): one status per row, calm late totals, a picker list for New invoice, a real file row. ===== */
/* status: one colour per row. Sent is quiet (muted word, forest dot); late is red; paid is forest. */
.mny .m-st.st-sent{color:var(--jz-muted)}
.mny .m-st.st-sent::before{background:var(--jz-forest)}
.mny .m-st.st-paid{color:var(--jz-forest)}
.mny .m-st.st-late{color:var(--jz-red);font-weight:600}
.mny .m-rt .m-st{white-space:nowrap}
/* hero late stat: a dot, not a triangle */
.mny .m-stat.is-late b::before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:.18em;font-size:inherit}

/* Who owes you: the late total in ink, the red lives in the small label only */
.mny .m-sum.is-late .m-sum-n{color:var(--jz-ink)}
.mny .m-sum-k .m-st{font-size:15px}
.mny .m-owe .m-rt{gap:4px}
.mny .m-quiet.m-under{margin:calc(-1 * var(--jz-s5)) 0 var(--jz-s6);text-align:left}
.mny .m-quiet button{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.mny .m-quiet button .m-ic{width:18px;height:18px;stroke-width:2.25}

/* New invoice: customers as a list with a round tick; Someone new last, its name box opens under it */
.mny .m-pick{min-width:0;border:0}
.mny .m-pick legend{padding:0}
.mny .m-pk{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:64px;margin:0;padding:var(--jz-s2) var(--jz-s4);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mny .m-pk+.m-pk::before,.mny .m-all+.m-pk::before,.mny .m-pk+.m-all::before,.mny .m-all>.m-pk:first-of-type::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--m-hair)}
.mny .m-all{position:relative}
.mny.mny .m-pk input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mny .m-pk:active{background:var(--jz-field)}
.mny .m-pk:has(input:focus-visible){outline:2px solid var(--jz-forest);outline-offset:-2px}
.mny .m-pk .m-rb>small{font-size:15px}
.mny .m-tk{flex:none;width:24px;height:24px;margin-left:auto;border-radius:50%;box-shadow:inset 0 0 0 1.75px #c3c9c2;display:inline-flex;align-items:center;justify-content:center}
.mny .m-pk:has(input:checked) .m-tk{background:var(--jz-forest);box-shadow:none}
.mny .m-pk:has(input:checked) .m-tk::after{content:"";width:10px;height:5px;margin-top:-3px;border:solid #fff;border-width:0 0 2.25px 2.25px;transform:rotate(-45deg)}
.mny .m-av-new{background:var(--jz-soft);color:var(--jz-forest)}
.mny .m-av-new .m-ic{width:20px;height:20px;stroke-width:2.25}
.mny .m-pk-new .m-rb>b{color:var(--jz-forest)}
.mny .m-all>summary{position:relative;list-style:none;display:flex;align-items:center;min-height:52px;padding:0 var(--jz-s4) 0 68px;font:600 15px/1 var(--jz-sans);color:var(--jz-forest);cursor:pointer}
.mny .m-all>summary::-webkit-details-marker{display:none}
.mny .m-all>summary::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--m-hair)}
.mny .m-all[open]>summary{display:none}
.mny .m-pick .m-newname{padding:0 var(--jz-s4) var(--jz-s4) 68px}
.mny .m-pick .m-newname::before{content:none}
.mny.mny.mny.mny .m-pick .m-newname input{min-height:48px;margin:0;padding:0 14px;border-radius:12px;background:var(--jz-field)}
.mny.mny.mny.mny .m-pick .m-newname input:focus{box-shadow:inset 0 0 0 2px var(--jz-forest)}
.mny .m-who:has(.m-pk-new input:not(:checked)) .m-newname{display:none}
.mny .m-who .m-sh{margin-top:calc(-1 * var(--jz-s2))}

/* form rows: label left, value right (Date paid, VAT, Category) */
.mny .m-f.m-line{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);min-height:56px;padding-top:8px;padding-bottom:8px;font:400 17px/1.3 var(--jz-sans);color:var(--jz-ink)}
.mny.mny.mny.mny .m-f.m-line :is(input,select){flex:1 1 auto;width:auto;min-width:0;min-height:40px;margin:0;text-align:right;text-align-last:right;font-weight:400;color:var(--jz-muted)}
.mny.mny.mny.mny .m-f.m-line select{padding-right:22px}
.mny .m-f.m-line.pick::after{right:20px;bottom:auto;top:50%;margin-top:-6px;transform:rotate(-45deg);border-color:var(--m-chev)}
.mny .m-f.m-line>.m-ic{flex:none;width:16px;height:16px;margin-left:-6px;stroke:var(--m-chev);stroke-width:2.5}
/* the date: no browser glyph; the whole value is the tap target */
.mny .rec-date{position:relative}
.mny.mny.mny.mny .rec-date input[type=date]{position:relative;display:flex;justify-content:flex-end;min-width:0}
.mny .rec-date input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}
.mny .rec-date input[type=date]::-webkit-date-and-time-value{text-align:right}
.mny .rec-date input[type=date]::-webkit-datetime-edit{padding:0}
/* the money field: a £ in front of the big number */
.mny .m-gbp{padding-left:calc(var(--jz-s4))}
.mny.mny.mny.mny .m-gbp input{padding-left:20px}
.mny .m-gbp::after{content:"£";position:absolute;left:var(--jz-s4);bottom:16px;font:700 28px/1.2 var(--jz-sans);color:var(--jz-ink)}
.mny .m-gbp:has(input:placeholder-shown)::after{color:#a3aba4}

/* receipt: the snap card when empty, a file row once picked (money.js; without it the native picker shows) */
.m-js .mny .rec-snap input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.m-js .mny .rec-snap{padding-bottom:var(--jz-s6)}
.mny .rec-snap[hidden],.mny .rec-picked[hidden]{display:none}
.mny .rec-picked{display:flex;align-items:center;gap:var(--jz-s3);min-height:80px;margin-bottom:var(--jz-s6);padding:var(--jz-s3) var(--jz-s2) var(--jz-s3) var(--jz-s3)}
.mny .rec-thumb{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--jz-soft);color:var(--jz-forest)}
.mny .rec-thumb img{width:100%;height:100%;object-fit:cover}
.mny .rec-thumb .m-ic{width:26px;height:26px}
.mny .rec-picked .m-rb>small{font-size:13px}
.mny .rec-clear{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--jz-faint);cursor:pointer}
.mny .rec-clear:active{background:var(--jz-field)}
.mny .rec-clear .m-ic{width:24px;height:24px}
/* totals with no subtotal above: no hairline floating over Total */
.mny .m-tots>.grand:first-child{margin-top:0;padding-top:4px;border-top:0}

/* ===== Pass 4 (31 Oct): colour on the label, shared avatars, quiet talk link, a readable date. ===== */
/* hero late stat: the number stays white; the red lives in the small "• Late" word */
.mny .m-stat.is-late b{color:var(--jz-on-night)}
#app .mny .m-stat.is-late b::before{content:none}
#app .mny .m-stat.is-late small .m-st{gap:0;font:600 13px/1.3 var(--jz-sans);color:var(--jz-night-late)}
.mny .m-stat.is-late small .m-st::before{width:7px;height:7px;margin-right:6px}
/* invoice rows use the shared six-tint avatar (contacts/_av.html) */
.mny .m-row>.avt{width:40px;height:40px;font-size:15px}
/* Who owes you: a plain 76px row when there is no reminder to act on */
.mny .m-owe:not(:has(.m-owe-go,.m-owe-why)){padding-bottom:0}
.mny .m-owe:not(:has(.m-owe-go,.m-owe-why)) .m-row{min-height:76px;padding-bottom:var(--jz-s3)}

/* expense note: the mic is a quiet forest link inside the card; the privacy words sit behind "How talking works" */
.mny .rec-talk{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0;padding:0 var(--jz-s4) var(--jz-s2)}
.mny .rec-talk .mic-slot,.mny .rec-talk .talk{display:contents}
.mny.mny.mny.mny.mny input.rec-tog{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mny .rec-talk .talk-btn.btn{order:1;flex:none;width:auto;min-height:44px;margin:0 0 0 -6px;padding:0 10px 0 6px;justify-content:flex-start;gap:10px;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--jz-forest);font:600 15px/1 var(--jz-sans)}
.mny .rec-talk .talk-btn.btn[hidden]{display:none}
.mny .rec-talk .talk-btn.btn[aria-pressed=true]{color:var(--jz-red);background:var(--jz-red-soft)}
.mny .rec-how{order:2;position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;font:500 15px/1 var(--jz-sans);color:var(--jz-muted);cursor:pointer}
.mny .rec-how::after{content:"";width:6px;height:6px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 1.75px 1.75px 0;transform:rotate(45deg);transition:transform 150ms}
.mny .rec-tog:checked~.rec-how::after{margin-top:3px;transform:rotate(-135deg)}
.mny .rec-tog:focus-visible~.rec-how{outline:2px solid var(--jz-forest);outline-offset:2px;border-radius:6px}
.mny .rec-talk .talk-live{order:3;flex:1 0 100%;margin:0 0 var(--jz-s2);font:500 13px/18px var(--jz-sans);color:var(--jz-red)}
.mny .rec-talk .talk-live[hidden]{display:none}
.mny .rec-talk p.note{order:4;flex:1 0 100%;margin:0 0 var(--jz-s2);font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
.mny .rec-talk .talk-words{display:none}
.mny .rec-tog:checked~.mic-slot .talk-words{display:block}
.mny .rec-talk::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--m-hair)}
.mny .m-group>.m-f:has(+.rec-talk){padding-bottom:6px}
.mny .m-group>.rec-talk::before{content:none}

/* Date paid: "31 Oct ›" drawn by money.js; the real date input stays over the row, its own text hidden */
.mny .rec-dv{position:absolute;right:42px;top:50%;transform:translateY(-50%);font:400 17px/1.3 var(--jz-sans);color:var(--jz-muted);pointer-events:none}
.m-js .mny.mny.mny.mny .rec-date.has-dv input[type=date]{color:transparent}
.m-js .mny .rec-date.has-dv input[type=date]::-webkit-datetime-edit{color:transparent}

/* ===== Pass 5 (1 Nov, art director round): one card per fact, the gradient only in the tray. ===== */
/* Who owes you: the late total and the invoices that make it up are one card */
.mny .m-owed{padding:0;overflow:hidden}
.mny .m-owed-top{padding:var(--jz-s6) var(--jz-s5) var(--jz-s5)}
.mny .m-owed .m-owe .m-row{padding-left:var(--jz-s5);padding-right:var(--jz-s4)}
.mny .m-owed .m-owe-go{margin-left:var(--jz-s5);margin-right:var(--jz-s5)}
.mny .m-owed .m-owe-why{padding:0 var(--jz-s5)}
.mny .m-owed .m-owe::before{content:"";position:absolute;top:0;left:var(--jz-s5);right:0;height:1px;background:var(--m-hair)}
.mny .m-owed .m-owe:last-child{padding-bottom:var(--jz-s2)}
.mny .m-owed .m-owe:last-child:not(:has(.m-owe-go,.m-owe-why)){padding-bottom:0}
/* one late invoice: the hero already says the amount, so the row keeps only who and how late */
.mny .m-owed.is-one .m-rt>b{display:none}
/* the reminder actions are rows in one group */
.mny .m-chase .m-lt{font-weight:400}

/* Receipts: the summary card is read-only; its one row opens this quarter's checklist */
.mny .rec-now{overflow:hidden}
.mny .rec-now a.rec-state{width:auto;margin:var(--jz-s5) calc(-1 * var(--jz-s5)) calc(-1 * var(--jz-s5));padding:0 var(--jz-s4) 0 var(--jz-s5);min-height:56px;gap:var(--jz-s2);border-top:1px solid var(--m-hair)}
.mny .rec-now a.rec-state .m-lt{flex:1;font:400 17px/1.3 var(--jz-sans)}
.mny .rec-now a.rec-state .m-lt.m-warn{color:var(--jz-amber);font-weight:600}
.mny .rec-now a.rec-state::before{content:none}

/* New invoice: the "Show all" fold has no positioned parent, so its hairline jumped to the top of the card */
#app .m-who .jz-who>details.jz-all::before{display:none}

/* ===== Pass 6 (1 Nov, art director round 2): number then status everywhere, a full invoice page, a tappable hero. ===== */
/* status line: "INV-0006 ● 10 days late". The dot is the separator, so 8px of air before it and no middot */
#app .mny .m-rb>small .m-st,#app .mny .jz-sub .m-st{margin-left:8px;font-size:inherit}
#app .mny .m-rb>small{white-space:normal}
/* rows carry the amount only on the right, centred on the row */
.mny .m-group .m-row .m-rt{align-self:center}

/* hero: the top opens Who owes you; the late cell is a button with a pressed state */
.mny .m-hero{padding:0;}
.mny .m-hero-go{position:relative;z-index:1;display:block;padding:var(--jz-s6) var(--jz-s6) var(--jz-s5);color:inherit;text-decoration:none;border-radius:24px 24px 0 0;-webkit-tap-highlight-color:transparent}
.mny .m-hero-go:active{background:rgba(255,255,255,.06)}
.mny .m-hero-k{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3)}
.mny .m-hero-more{display:inline-flex;align-items:center;gap:2px;min-height:28px;margin:-4px -8px -4px 0;padding:0 6px 0 12px;border-radius:999px;background:rgba(255,255,255,.08);font:600 13px/1 var(--jz-sans);color:var(--jz-on-night)}
.mny .m-hero-more .m-ic{width:14px;height:14px;stroke-width:2.5}
.mny .m-hero-s{display:block}
.mny .m-hero .m-stats{position:relative;z-index:1;margin:0}
.mny .m-hero .m-stat{position:relative;padding:var(--jz-s4) var(--jz-s6) var(--jz-s5)}
.mny .m-hero a.m-stat{padding-right:44px;-webkit-tap-highlight-color:transparent;transition:background 120ms}
.mny .m-hero a.m-stat:active{background:rgba(255,255,255,.08)}
.mny .m-hero a.m-stat>.m-ic{position:absolute;right:18px;top:50%;width:18px;height:18px;margin-top:-9px;stroke:var(--jz-night-muted);stroke-width:2.5}
.mny .m-hero a.m-stat:first-child{border-bottom-left-radius:24px}

/* invoice detail: the amount is the title, the customer is a row under it, then a dated history */
#app .mny .m-dt h1.m-amt{font:800 40px/1.05 var(--jz-sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
#app .mny .m-dt h1.m-amt .p{font-size:.55em;font-weight:700;letter-spacing:-.02em}
#app .mny .m-dt .jz-sub{margin-top:6px}
.mny .m-cust{display:flex;align-items:center;gap:var(--jz-s3);min-height:76px;margin:0 0 var(--jz-s6);padding:var(--jz-s3) var(--jz-s3) var(--jz-s3) var(--jz-s4);border-radius:var(--m-r);background:var(--jz-card);box-shadow:var(--m-sh)}
.mny .m-cust>.avt{width:44px;height:44px;font-size:16px}
.mny .m-cwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:var(--jz-ink);text-decoration:none}
.mny .m-cwho b{font:600 17px/1.3 var(--jz-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mny .m-cwho small{font:400 15px/1.35 var(--jz-sans);color:var(--jz-muted)}
.mny .m-cust .iconbtn{margin-left:auto}
.mny .m-tl{list-style:none;margin:0 0 var(--jz-s8);padding:var(--jz-s2) 0}
.mny .m-tl li{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:44px;padding:0 var(--jz-s4) 0 44px;font:400 17px/1.3 var(--jz-sans);color:var(--jz-ink)}
.mny .m-tl li::before{content:"";position:absolute;left:18px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--jz-forest);box-sizing:border-box}
.mny .m-tl li+li::after{content:"";position:absolute;left:22px;bottom:calc(50% + 7px);height:30px;width:2px;border-radius:1px;background:var(--jz-hair,rgba(23,33,29,.12))}
.mny .m-tl li.is-next::before,.mny .m-tl li.is-off::before{background:none;border:2px solid var(--jz-faint)}
.mny .m-tl li.is-late::before{background:var(--jz-red)}
.mny .m-tl li.is-late span{color:var(--jz-red);font-weight:600}
.mny .m-tl li.is-paid::before{background:var(--jz-ok)}
.mny .m-tl li.is-paid span{font-weight:600}
.mny .m-tl li.is-next span,.mny .m-tl li.is-off span{color:var(--jz-muted)}
.mny .m-tl span{flex:1;min-width:0}
.mny .m-tl time{flex:none;font:400 17px/1.3 var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}

/* the tray: Mark paid (1) beside the reminder (2) */
.mny .dock.m-tray{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:stretch}
.mny .dock.m-tray>form{display:flex;margin:0}
.mny .dock.m-tray .btn{width:100%;min-height:56px;margin:0;justify-content:center;padding:0 12px;white-space:nowrap}

/* New invoice: the same VAT card, helper line and tray as New quote */
.mny .m-vat{margin:var(--jz-s6) 0 0}
.mny .m-vat .m-sw{min-height:52px}
#app .mny .m-help{margin:var(--jz-s2) var(--jz-s4) 0;font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app#app .mny .dock.m-start>.safe{margin:0 0 var(--jz-s2);padding:0 var(--jz-s4)}
body:has(.mny .dock>.safe) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + var(--jz-btn) + 2*var(--jz-dock-gap) + 48px)}
/* the status word is the same size as the number before it; only weight and colour change */
#app .mny .m-rb>small .m-st{font:600 15px/1.35 var(--jz-sans)}
#app .mny .jz-sub .m-st{font:600 15px/1.4 var(--jz-sans)}

/* Walk 1 Nov: the deposit route. A muted footnote under Add a line; the paid page names it on a ready invoice. */
.mny .m-hint{margin:var(--jz-s2) 0 24px;padding:0 var(--jz-s4);font:400 13px/1.35 var(--jz-sans);color:var(--jz-muted)}

/* Art-director pass 4 (1 Nov): totals use small pence like every hero amount; draft is a filled grey dot */
#app .mny .m-tots>.grand>span:last-child{font-size:34px;line-height:40px}
#app .mny .m-tots>.grand .p{font:700 .55em/1 var(--jz-sans);letter-spacing:-.02em;color:inherit}
#app#app .mny .m-st.st-draft::before{background:currentColor;box-shadow:none}

/* Judge 1 (1 Nov): one number per hero. "1 late" joins the hero line; Paid this month is its own row under the hero. */
#app .mny .m-hero-late{color:var(--jz-night-late);font-weight:600}
#app .mny .m-hero-late::before{content:"";display:inline-block;width:8px;height:8px;margin:0 6px 0 0;border-radius:50%;background:currentColor;vertical-align:.1em}
.mny .m-hero{margin-bottom:var(--jz-s5)}
.mny .m-paid .m-link{cursor:default}
.mny .m-paid .m-link:active{background:none}
.mny .m-paid-n{flex:none;margin-left:auto;font:700 17px/1.3 var(--jz-sans);color:var(--jz-ink);font-variant-numeric:tabular-nums}
.mny .m-paid+.m-sh,.mny .m-hero+.m-sh{margin-top:var(--jz-s8)}
.mny .m-paid{margin-bottom:0}
/* Receipts: empty earlier quarters fold into one row */
.mny .rec-empty>summary{min-height:64px;--m-inset:16px}
.mny .rec-empty>summary .m-rb small{color:var(--jz-muted)}
.mny .rec-q+.rec-empty>summary::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--m-hair)}
.mny .rec-empty[open]>summary~.rec-q{min-height:56px}
/* Invoice detail: a customer with no saved contact still reads as a live row (number line + chevron to edit the name) */
.mny .m-cust>.m-ic:last-child{width:16px;height:16px;margin:0 var(--jz-s1) 0 auto;stroke:var(--m-chev);stroke-width:2.5}
/* Judge 2 (1 Nov): Invoice detail wears Quote detail's anatomy. Customer name 28/700, "INV-0005 · Draft" 15 muted under it, the total in the totals card. */
#app .mny .m-dt h1{font:700 28px/34px var(--jz-sans);letter-spacing:-.02em;color:var(--jz-ink);overflow-wrap:anywhere}
#app .mny .m-dt .jz-sub{margin-top:4px;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.mny .m-tots>.owed{font-weight:600;color:var(--jz-ink)}
/* Draft lines: no remove circles until Edit (iOS edit mode, as Quote detail). A red minus then leads each line; still reachable by keyboard. */
.mny .m-edit-t{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.mny .m-lhead{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:4px var(--jz-s4) 0;font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
.mny .m-edit-b{display:inline-flex;align-items:center;min-height:44px;padding:0 0 0 var(--jz-s3);font:600 15px/20px var(--jz-sans);color:var(--jz-forest);cursor:pointer}
.mny .m-edit-on{display:none}
.mny .m-edit-t:checked~#invoice .m-edit-on{display:inline}
.mny .m-edit-t:checked~#invoice .m-edit-off{display:none}
.mny .m-lines .m-x{flex:none;order:-1;margin:0 calc(-1 * var(--jz-s3)) 0 0;width:0;overflow:hidden;opacity:0;transition:width 200ms,opacity 200ms}
.mny .m-lines .m-x:focus-within,.mny .m-edit-t:checked~#invoice .m-x{width:32px;margin-right:0;opacity:1}
.mny .m-lines .m-x button{width:32px;height:44px;border-radius:0}
.mny .m-lines .m-x button:active{background:none}
.mny .m-lines .m-x svg{width:24px;height:24px}
.mny .m-lines .m-x circle{fill:var(--jz-red)}
.mny .m-lines .m-x path{fill:none;stroke:#fff;stroke-width:2.25;stroke-linecap:round}

/* ======================================================================================================================
   6 Nov rebuild: Money, Who owes you, an invoice, reminders, mark paid (invoices/*, not print.html). Scoped to .mn
   (invoices/base.html), so Receipts (records/, .mny only) keeps the rules above. Mockups: docs/redesign/light/money.html
   and night/money.html. Built from the shared parts in jeevz.css (cards, rows, chips, buttons, ring, wave).
   A difference between the looks is a token: the screen's own --mn-* tokens are set once for light and once for night,
   and the [data-theme=dark] block and the auto-on-a-dark-phone block stay identical (invoices/test_rebuild.py checks).
   ====================================================================================================================== */
#app .mn{
  --mn-ring:block; --mn-bar:none;                                   /* light draws the gauge, night the big number and bar */
  --mn-key-bg:var(--jz-surface); --mn-key-ring:var(--jz-edge); --mn-key-late:var(--jz-late); --mn-key-ok:var(--jz-forest);
  --mn-sq:var(--jz-surface);
  --mn-late-bg:var(--jz-surface); --mn-late-amt:var(--jz-late); --mn-late-chip:var(--jz-late-fill); --mn-late-chip-fg:var(--jz-on-late);
  --mn-go-bg:var(--jz-accent); --mn-go-fg:var(--jz-on-accent); --mn-go-sh:var(--jz-shadow-btn);
  --mn-paid-bg:var(--jz-surface); --mn-paid-ink:var(--jz-ink); --mn-paid-ink2:var(--jz-ink-2); --mn-paid-hair:var(--jz-hair); --mn-paid-s2:var(--jz-surface-2); --mn-paid-chev:var(--jz-chev);
  --mn-paid-wave:block; --mn-paid-chip:inline-flex; --mn-paid-tick:none; --mn-paid-size:60px;
  --mn-fold-bg:var(--jz-surface); --mn-fold-ring:var(--jz-ink);
  padding:0 var(--jz-gutter) var(--jz-s8)}
[data-theme=dark] #app .mn{
  --mn-ring:none; --mn-bar:block;
  --mn-key-bg:transparent; --mn-key-ring:transparent; --mn-key-late:#ffb547; --mn-key-ok:#c3ccc6;
  --mn-sq:#f4f5f2;
  --mn-late-bg:#ffb547; --mn-late-amt:#06100c; --mn-late-chip:#06100c; --mn-late-chip-fg:#ffffff;
  --mn-go-bg:#06100c; --mn-go-fg:#ffffff; --mn-go-sh:none;
  --mn-paid-bg:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --mn-paid-ink:#06100c; --mn-paid-ink2:#1d3a2c; --mn-paid-hair:rgba(6,16,12,.14); --mn-paid-s2:rgba(6,16,12,.1); --mn-paid-chev:rgba(6,16,12,.4);
  --mn-paid-wave:none; --mn-paid-chip:none; --mn-paid-tick:grid; --mn-paid-size:76px;
  --mn-fold-bg:rgba(6,16,12,.1); --mn-fold-ring:transparent;
}
@media (prefers-color-scheme:dark){
[data-theme=auto] #app .mn{
  --mn-ring:none; --mn-bar:block;
  --mn-key-bg:transparent; --mn-key-ring:transparent; --mn-key-late:#ffb547; --mn-key-ok:#c3ccc6;
  --mn-sq:#f4f5f2;
  --mn-late-bg:#ffb547; --mn-late-amt:#06100c; --mn-late-chip:#06100c; --mn-late-chip-fg:#ffffff;
  --mn-go-bg:#06100c; --mn-go-fg:#ffffff; --mn-go-sh:none;
  --mn-paid-bg:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --mn-paid-ink:#06100c; --mn-paid-ink2:#1d3a2c; --mn-paid-hair:rgba(6,16,12,.14); --mn-paid-s2:rgba(6,16,12,.1); --mn-paid-chev:rgba(6,16,12,.4);
  --mn-paid-wave:none; --mn-paid-chip:none; --mn-paid-tick:grid; --mn-paid-size:76px;
  --mn-fold-bg:rgba(6,16,12,.1); --mn-fold-ring:transparent;
}
}

/* the hero: light, a 248px gauge with the number inside; night, the number at 112px over a late / not-due bar */
#app .mn .mn-hero{margin:0 0 var(--jz-s5)}
#app .mn .mn-hero.is-ring{display:var(--mn-ring);text-align:center}
#app .mn .mn-hero.is-bar{display:var(--mn-bar)}
#app .mn .mn-gauge{display:inline-grid;place-items:center;color:var(--jz-ink);text-decoration:none}
#app .mn .mn-gauge>*{grid-area:1/1}
#app .mn .mn-gauge-in{display:flex;flex-direction:column;align-items:center;gap:8px}
#app .mn .mn-hero-l{display:block;font:600 var(--jz-t-body)/1.1 var(--jz-sans);color:var(--jz-ink)}
#app .mn .mn-hero-n{display:block;font-size:76px;color:var(--jz-ink)}
#app .mn .mn-hero-s{display:block;margin:0;font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .mn-hero-s .m-hero-late{color:var(--jz-late);font-weight:600}
#app .mn .mn-gauge .mn-hero-s{max-width:170px}
#app .mn .mn-big{display:block;color:var(--jz-ink);text-decoration:none}
#app .mn .mn-big .mn-hero-l{color:var(--jz-ink-2);font-size:16px}
#app .mn .mn-big .mn-hero-n{margin-top:10px;font-size:112px;line-height:.86}
#app .mn .is-bar .mn-hero-s{margin-top:10px}
#app .mn .mn-split{display:flex;gap:4px;height:14px;margin:18px 0 0;border-radius:7px;overflow:hidden}
#app .mn .mn-split i{display:block;min-width:8px;border-radius:4px}
#app .mn .mn-split i.is-late{background:var(--jz-late-fill)}
#app .mn .mn-split i.is-ok{background:var(--mn-sq)}
#app .mn .mn-keys{display:flex;flex-wrap:wrap;gap:10px;margin:0}
#app .mn .is-ring .mn-keys{justify-content:center;margin-top:-10px}
#app .mn .is-bar .mn-keys{gap:16px;margin-top:10px}
#app .mn .mn-key{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 15px;border-radius:var(--jz-r-full);background:var(--mn-key-bg);box-shadow:inset 0 0 0 1.5px var(--mn-key-ring);font:600 16px/1 var(--jz-sans);color:var(--jz-ink)}
#app .mn .is-bar .mn-key{min-height:24px;padding:0;color:var(--jz-ink-2)}
#app .mn .mn-key .jz-ic{width:17px;height:17px;stroke-width:2.5}
#app .mn .mn-key.is-late{color:var(--jz-late)}
#app .mn .is-bar .mn-key.is-late .jz-ic{color:var(--mn-key-late)}
#app .mn .is-ring .mn-key.is-ok{color:var(--mn-key-ok)}
#app .mn .mn-sq{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--mn-sq)}

/* the lead late card: white with an amber edge in light, a solid amber card at night (the mockup's) */
#app .mn .mn-late{background:var(--mn-late-bg);margin-top:var(--jz-s5)}
#app .mn .mn-late .jz-chip.is-late{background:var(--mn-late-chip);color:var(--mn-late-chip-fg)}
#app .mn .mn-late .jz-amt{color:var(--mn-late-amt);font-size:54px}
#app .mn .mn-late .jz-title a{color:inherit;text-decoration:none}
#app .mn .mn-late .jz-meta{margin:2px 0 0}
#app .mn .mn-go{display:flex;gap:10px;align-items:center}
#app .mn .mn-go>.jz-btn{flex:1;min-width:0}
#app .mn .mn-late .mn-go>.jz-btn.is-send{background:var(--mn-go-bg);color:var(--mn-go-fg);box-shadow:var(--mn-go-sh)}
#app .mn .mn-call{width:var(--jz-btn-l);height:var(--jz-btn-l);background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring)}
#app .mn .mn-call:active{transform:scale(.97)}

/* invoice rows: the customer, the number and a status chip, the amount */
#app .mn .mn-rows{margin:0 0 14px}
#app .mn .mn-row .jz-li-t small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
#app .mn .mn-row .jz-chip{min-height:28px;padding:0 10px 0 8px;font-size:var(--jz-t-meta);gap:5px}
#app .mn .mn-row .jz-chip.is-line{padding-left:10px}
#app .mn .mn-row .jz-chip .jz-ic{width:15px;height:15px}
#app .mn .mn-row .jz-li-v{font-size:22px}

/* paid this month: the celebration. Light, a white card with the wave of money coming in; night, the gradient */
#app .mn .mn-paid{margin-top:var(--jz-s7);padding:22px 20px 18px;background:var(--mn-paid-bg);
  --jz-ink:var(--mn-paid-ink); --jz-ink-2:var(--mn-paid-ink2); --jz-hair:var(--mn-paid-hair); --jz-surface-2:var(--mn-paid-s2); --jz-chev:var(--mn-paid-chev); color:var(--jz-ink)}
#app .mn .mn-paid.is-quiet{padding:0;background:none;box-shadow:none;margin-top:var(--jz-s6)}
#app .mn .mn-paid-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#app .mn .mn-paid-l{margin:0;font:600 var(--jz-t-body)/1.1 var(--jz-sans)}
#app .mn .mn-paid-n{margin:10px 0 0;font-size:var(--mn-paid-size)}
#app .mn .mn-paid-chip{display:var(--mn-paid-chip)}
#app .mn .mn-paid-tick{display:var(--mn-paid-tick);place-items:center;flex:none;width:72px;height:72px;border-radius:24px;background:#06100c;color:#c6ff5e}
#app .mn .mn-paid-tick .jz-ic{width:40px;height:40px;stroke-width:3.2;stroke-dasharray:30;animation:jz-draw .6s .8s var(--jz-ease-out) both}
#app .mn .mn-paid-s{margin:8px 0 0;font:500 var(--jz-t-body)/1.4 var(--jz-sans)}
#app .mn .mn-paid-s b{font-weight:700}
#app .mn .mn-wave{display:var(--mn-paid-wave);margin:14px 0 0}
#app .mn .mn-fold{margin:16px 0 0}
#app .mn .mn-fold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 20px;border-radius:var(--jz-r-btn);background:var(--mn-fold-bg);box-shadow:inset 0 0 0 1.5px var(--mn-fold-ring);font:600 17px/1 var(--jz-sans);color:var(--jz-ink);cursor:pointer}
#app .mn .mn-paid.is-quiet .mn-fold>summary{background:var(--jz-surface);box-shadow:var(--jz-shadow);border-radius:var(--jz-r-full)}
#app .mn .mn-fold>summary::-webkit-details-marker{display:none}
#app .mn .mn-fold>summary .jz-ic{width:20px;height:20px;stroke-width:2.6;transition:transform var(--jz-dur-quick) var(--jz-ease-out)}
#app .mn .mn-fold[open]>summary .jz-ic{transform:rotate(180deg)}
#app .mn .mn-fold .mn-rows{margin:12px 0 0}
#app .mn .mn-paid:not(.is-quiet) .mn-fold .mn-rows{background:transparent;box-shadow:none;border-radius:0;margin:6px -18px -4px}

/* the tax line */
#app .mn .mn-tax{display:flex;align-items:flex-start;gap:14px;margin-top:14px;color:var(--jz-ink);text-decoration:none}
#app .mn .mn-tax-t{display:flex;flex-direction:column;gap:4px}
#app .mn .mn-tax-t b{font:600 18px/1.25 var(--jz-sans)}
#app .mn .mn-tax-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}

/* the older money parts (Tools, the invoice's lists, forms), set on the new rows and cards */
#app .mn .m-sh{display:block;margin:var(--jz-s7) var(--jz-s1) var(--jz-s3);padding:0;font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app .mn .m-group{margin:0 0 14px;background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow)}
#app .mn :is(.m-row,.m-link,.m-item)+:is(.m-row,.m-link,.m-item,form)::before,#app .mn form+:is(.m-row,.m-link,.m-item,form)::before,#app .mn .m-group>form+form::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .mn .m-link{gap:14px;min-height:var(--jz-row);padding:12px 18px;font:inherit;color:var(--jz-ink)}
#app .mn :is(.m-row,.m-link):active{background:var(--jz-press)}
#app .mn .m-tile{width:44px;height:44px;border-radius:50%;background:var(--jz-surface-2);color:var(--jz-ink)}
#app .mn .m-tile .m-ic{width:22px;height:22px;stroke-width:2}
#app .mn .m-tile.red{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
#app .mn .m-lt{font:600 18px/1.25 var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink)}
#app .mn .m-lt.red{color:var(--jz-danger)}
#app .mn .m-lt small{margin-top:3px;font:500 var(--jz-t-meta)/1.35 var(--jz-sans);letter-spacing:0;color:var(--jz-ink-2)}
#app .mn .m-link>.m-ic:last-child,#app .mn .m-row>.m-ic:last-child{width:20px;height:20px;stroke:var(--jz-ink-2);stroke-width:2.4}
#app .mn .m-link.go .m-lt{color:var(--jz-forest)}
#app .mn .m-link.go .m-tile{background:var(--jz-wash);color:var(--jz-forest)}
#app .mn .jz-lock{margin:var(--jz-s6) 0 0}

/* Who owes you: the late total, then one late card per invoice */
#app .mn .mn-owed{margin:0 0 var(--jz-s5)}
#app .mn .mn-owed .jz-hero{margin:0}
#app .mn .mn-owed-s{margin:8px 0 0;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .mn-owed+.mn-late{margin-top:0}
#app .mn .m-owe.mn-late{margin-top:0}
#app .mn .mn-owe-who{margin:14px 0 4px;color:inherit;text-decoration:none}
#app .mn .mn-owe-who .jz-title,#app .mn .mn-owe-who .jz-meta{display:block}
#app .mn .mn-owe-who .jz-meta{margin-top:2px}
#app .mn .mn-late .jz-amt{font-size:48px}
#app .mn .mn-note{display:flex;align-items:flex-start;gap:10px;margin:var(--jz-s4) var(--jz-s1) 0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .mn-note .jz-ic{flex:none;width:20px;height:20px;margin-top:1px;color:var(--jz-forest)}
#app .mn .mn-note a{color:var(--jz-forest);font-weight:600}
#app .mn .mn-clear{display:flex;align-items:center;gap:20px;margin:var(--jz-s3) 0 var(--jz-s2)}
#app .mn .mn-clear .jz-ring-in .jz-ic{width:48px;height:48px;color:var(--jz-forest);stroke-width:3;stroke-dasharray:40;animation:jz-draw .6s .5s var(--jz-ease-out) both}
#app .mn .mn-clear .jz-headline{font-size:36px}
#app .mn .mn-clear .jz-lede{margin:6px 0 0}

/* An invoice: the money card first (the document, so pence show), then who, so far, what it's for, and the rest */
#app .mn .m-dt .jz-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#app .mn .m-st{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--jz-r-full);background:var(--jz-surface-2);font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-ink)}
#app .mn .m-st::before{width:8px;height:8px}
#app .mn .m-st.st-late{background:var(--jz-late-fill);color:var(--jz-on-late)}
#app .mn .m-st.st-sent::before{background:var(--jz-forest)}
#app .mn .m-st:is(.st-paid,.st-sent){color:var(--jz-ink)}
#app .mn .m-st.st-paid{background:var(--jz-wash);color:var(--jz-forest)}
#app .mn .m-st.st-ready{background:var(--jz-info-soft);color:var(--jz-info)}
#app .mn .m-st.st-pending{background:var(--jz-late-fill);color:var(--jz-on-late)}
#app .mn .m-st.st-approved{background:var(--jz-wash);color:var(--jz-forest)}
#app .mn .m-st.st-void,#app .mn .m-st.st-skipped,#app .mn .m-st.st-draft{color:var(--jz-ink-2)}
#app .mn .mn-doc{margin:0 0 14px}
#app .mn .mn-doc-l{margin:16px 0 0;font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .mn .mn-doc-n{margin:8px 0 6px;font-size:56px;color:var(--jz-ink)}
#app .mn .mn-doc.mn-late .mn-doc-n{color:var(--mn-late-amt)}
#app .mn .mn-doc-n small{font-size:.5em;letter-spacing:-.02em}
#app .mn .m-cust{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:14px 14px 14px 18px;border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .mn .m-cust .avt{width:52px;height:52px;font:700 18px/1 var(--jz-display)}
#app .mn .m-cwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;color:var(--jz-ink);text-decoration:none}
#app .mn .m-cwho b{font:600 18px/1.25 var(--jz-sans)}
#app .mn .m-cwho small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-cust .iconbtn.call{flex:none;display:grid;place-items:center;width:var(--jz-btn);height:var(--jz-btn);border-radius:50%;background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring)}
#app .mn .m-cust .iconbtn.call svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
#app .mn .m-cust>.m-ic{width:20px;height:20px;stroke:var(--jz-ink-2)}
/* so far: a vertical line of what happened, dots coloured with a word beside each */
#app .mn .m-tl{position:relative;margin:0 0 14px;padding:10px 18px;list-style:none}
#app .mn .m-tl li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding-left:30px;font:600 17px/1.3 var(--jz-sans);color:var(--jz-ink)}
#app .mn .m-tl li::before{content:"";position:absolute;left:4px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--jz-forest);box-shadow:0 0 0 4px var(--jz-surface)}
#app .mn .m-tl li+li::after{content:"";position:absolute;left:10px;bottom:50%;width:2px;height:48px;background:var(--jz-hair);z-index:-1}
#app .mn .m-tl li.is-next::before{background:var(--jz-surface);box-shadow:inset 0 0 0 2.5px var(--jz-forest),0 0 0 4px var(--jz-surface)}
#app .mn .m-tl li.is-late::before{background:var(--jz-late-fill)}
#app .mn .m-tl li.is-late{color:var(--jz-late)}
#app .mn .m-tl li.is-paid::before{background:var(--jz-done)}
#app .mn .m-tl li.is-off::before{background:var(--jz-faint)}
#app .mn .m-tl time{font:500 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-ink-2);font-variant-numeric:tabular-nums}
/* what it's for: lines, then the totals in a quiet well */
#app .mn .m-lhead{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:4px 18px 0;font:700 var(--jz-t-h2)/1.1 var(--jz-display);color:var(--jz-ink)}
#app .mn .m-edit-b{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;font:600 17px/1 var(--jz-sans);color:var(--jz-forest);cursor:pointer}
#app .mn .m-item{gap:12px;min-height:72px;padding:12px 18px}
#app .mn .m-item .m-rb>b{font:600 18px/1.25 var(--jz-sans)}
#app .mn .m-item .m-rb>small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-item .m-rt>b{font:700 20px/1.1 var(--jz-display);letter-spacing:-.02em}
#app .mn .m-x button{width:48px;height:48px;color:var(--jz-danger)}
#app .mn .m-none{padding:18px;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-tots{margin:4px 10px 10px;padding:12px 14px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);box-shadow:none}
#app .mn .m-tots>div{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-tots>.grand{border-top:1.5px solid var(--jz-hair);font:600 var(--jz-t-body)/1.2 var(--jz-sans)}
#app .mn .m-tots>.grand>span:last-child{font:800 34px/1 var(--jz-display);letter-spacing:var(--jz-track-num)}
#app .mn .m-tots>.grand small.p{font-size:.55em}
#app .mn .m-tots>.owed{font-weight:700;color:var(--jz-late)}
#app .mn .m-tots>.owed>span:last-child{color:var(--jz-late)}
/* forms inside a card: a label over a quiet well, 56px; switches; the fold row */
#app .mn .m-f{padding:12px 18px;font:600 var(--jz-t-label)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn.mn.mn .m-f :is(input,select,textarea){min-height:52px;margin:6px 0 0;padding:12px 14px;border-radius:var(--jz-r-s);background:var(--jz-surface-2);box-shadow:none;font:500 var(--jz-t-body)/1.35 var(--jz-sans);color:var(--jz-ink)}
#app .mn.mn.mn .m-f :is(input,select,textarea):focus{box-shadow:inset 0 0 0 2px var(--jz-forest)}
#app .mn .m-f :is(input,textarea)::placeholder{color:var(--jz-faint)}
#app .mn .m-f:focus-within{background:none}
#app .mn :is(.m-f,.m-sw,.m-pair)+:is(.m-f,.m-sw,.m-pair,.m-link)::before,#app .mn .m-pair::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .mn .m-pair::before{content:none}
#app .mn .m-pair .m-f+.m-f::before{content:none}
#app .mn .m-pair .m-f+.m-f{padding-left:6px}
#app .mn .m-pair .m-f:first-child{padding-right:6px}
#app .mn .m-sw{min-height:64px;padding:8px 18px;font:600 18px/1.25 var(--jz-sans)}
#app .mn .m-sw input:focus-visible{outline-color:var(--jz-forest)}
#app .mn .m-hint{margin:-4px var(--jz-s1) 14px;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn details.m-fold[open]>form{box-shadow:inset 0 1.5px 0 var(--jz-hair);padding-bottom:6px}
#app .mn .m-f.big input,#app .mn.mn.mn .m-f.big input{min-height:64px;font:800 34px/1 var(--jz-display);letter-spacing:-.02em}
#app .mn .alert:not(.success):not(.info){padding:14px 16px;border:0;border-radius:var(--jz-r-inner);background:var(--jz-late-soft);color:var(--jz-ink);font:500 var(--jz-t-meta)/1.4 var(--jz-sans)}
#app .mn .alert a{color:var(--jz-forest);font-weight:600}
#app .mn .safe:not(.dock *){margin:var(--jz-s5) 0 var(--jz-s4);font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}

/* reminders and the send screen: the message as a letter, the send buttons stacked, Skip as a quiet link */
#app .mn .mn-subchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#app .mn .mn-chase-owed .mn-doc-n{font-size:48px}
#app .mn .mn-chase-owed .m-late-n{color:inherit;font-weight:inherit}
#app .mn>.jz-jnote{margin:var(--jz-s5) var(--jz-s1) var(--jz-s3)}
#app .mn .mn-letter .m-f:first-child{padding-top:16px}
#app .mn.mn.mn .mn-letter textarea{min-height:300px;line-height:1.5;background:var(--jz-surface-2)}
#app .mn.mn.mn .mn-letter :is(input,textarea)[readonly]{background:var(--jz-surface-2);color:var(--jz-ink)}
#app .mn .mn-sends{display:flex;flex-direction:column;gap:10px;margin:0 0 var(--jz-s4)}
#app .mn .m-quiet{margin:var(--jz-s4) 0 0}
#app .mn .m-quiet button{min-height:48px;font:600 17px/1 var(--jz-sans);color:var(--jz-forest)}
#app .mn .mn-clear.is-off .mn-off{display:grid;place-items:center;flex:none;width:112px;height:112px;border-radius:50%;background:var(--jz-surface-2);color:var(--jz-ink-2)}
#app .mn .mn-clear.is-off .mn-off .jz-ic{width:44px;height:44px;stroke-width:2.6}
#app .mn .m-done{font:600 var(--jz-t-meta)/1.4 var(--jz-sans)}

/* the small pages (Mark paid, Cancel, Send, Payment terms, Reminders settings): a summary card, then plain buttons */
#app .mn .m-sum{margin:0 0 14px;padding:var(--jz-s5);border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .mn .m-sum-k{font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .mn .m-sum-n{margin:10px 0 6px;font:800 56px/.92 var(--jz-display);letter-spacing:var(--jz-track-num);color:var(--jz-ink)}
#app .mn .m-sum-n .p{font-size:.5em;letter-spacing:-.02em}
#app .mn .m-sum-s{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-ok{gap:16px}
#app .mn .m-ok .m-tick{width:56px;height:56px;background:var(--jz-wash);color:var(--jz-forest)}
#app .mn .m-ok b{font:700 var(--jz-t-card)/1.15 var(--jz-display);letter-spacing:-.015em;color:var(--jz-ink)}
#app .mn .m-ok small{margin-top:4px;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-sub{margin:0 0 var(--jz-s5);font:500 var(--jz-t-body)/1.45 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-btn{min-height:var(--jz-btn);border-radius:var(--jz-r-btn);background:var(--jz-forest);color:var(--jz-on-forest);font:600 18px/1 var(--jz-sans)}
#app .mn .m-btn.soft{background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring)}
#app .mn .m-btn.danger{background:var(--jz-danger-fill);color:var(--jz-on-danger)}
#app .mn .m-foot{margin:var(--jz-s3) var(--jz-s1) 0;padding:0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-foot .m-ic{width:20px;height:20px;stroke:var(--jz-forest)}
#app .mn .m-help{margin:0 var(--jz-s1);font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .mn .m-dt:has(~ .mn-doc) .jz-sub{display:none}
#app .mn>.alert.info,#app .mn>.alert.success{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:14px 16px;border:0;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);color:var(--jz-ink);box-shadow:none;font:500 var(--jz-t-meta)/1.4 var(--jz-sans)}

/* ===================== Q7c (6 Nov): Receipts (records/, .mny.mn.rec) in both looks =====================
   Records now wears the rebuilt money anatomy (.mn). The quarter's hero: money in and out stacked on the left, and a
   gauge on the right of receipts added (forest) and still to add (amber), so "3 to add" is a picture, not a sum. */
#app .rec .rec-now{padding:var(--jz-s5) var(--jz-s5) 6px}
#app .rec .rec-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:var(--jz-s3)}
#app .rec .rec-now .m-stats{flex-direction:column;gap:14px;margin:0;border:0}
#app .rec .rec-now .m-stat,#app .rec .rec-now .m-stat+.m-stat{padding:0;border:0;gap:2px}
#app .rec .rec-now .m-stat small{order:0;font:600 var(--jz-t-label)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .rec .rec-now .m-stat b{font:800 40px/1 var(--jz-display);letter-spacing:var(--jz-track-num);color:var(--jz-ink)}
#app .rec .rec-now .m-stat+.m-stat b{font-size:30px;color:var(--jz-ink-2)}
#app .rec .rec-gauge{flex:none}
#app .rec .rec-gauge .jz-ring-in small{font-size:13px}
#app .rec .rec-state{margin:var(--jz-s4) calc(-1 * var(--jz-s5)) 0;padding:12px var(--jz-s5);border-top:0;box-shadow:inset 0 1.5px 0 var(--jz-hair);min-height:56px}
#app .rec .rec-state+.rec-state{margin-top:0}
#app .rec .rec-state .m-lt{font:600 18px/1.25 var(--jz-sans)}
#app .rec .rec-state .m-lt.m-warn{color:var(--jz-late)}
#app .rec .rec-state>.m-ic:not(:last-child){width:20px;height:20px;stroke:var(--jz-forest)}
#app .rec .rec-state .m-tile{width:44px;height:44px}
#app .rec .m-warn{color:var(--jz-late);font-weight:600}
#app .rec .rec-q small .m-warn{white-space:nowrap}
#app .rec .rec-q .m-rb b{font:600 18px/1.25 var(--jz-sans)}
#app .rec .rec-q .m-rb small{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .rec .m-val{margin-left:auto;font:500 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-ink-2)}
#app .rec .m-val+.m-ic{margin-left:6px}
/* the add-a-receipt page: the snap card is a dashed drop well, the checklist ticks read the look */
#app .rec .rec-snap{border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow),inset 0 0 0 2px var(--jz-hair)}
#app .rec .rec-cam{width:72px;height:72px;border-radius:50%;background:var(--jz-wash);color:var(--jz-forest)}
#app .rec .rec-snap b{font:700 var(--jz-t-card)/1.15 var(--jz-display);letter-spacing:-.01em}
#app .rec .rec-snap small{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .rec .rec-tick{box-shadow:inset 0 0 0 2px var(--jz-chev);color:var(--jz-on-forest)}
#app .rec .rec-chk.ok .rec-tick{background:var(--jz-done);color:var(--jz-on-done)}
#app .rec .rec-chk.ok .m-rb>b{color:var(--jz-ink-2)}
#app .rec.rec .rec-pick input{box-shadow:inset 0 0 0 2px var(--jz-chev)}
#app .rec.rec .rec-pick input:checked::after{border-color:var(--jz-on-forest)}
#app .rec .rec-step a{min-height:48px;background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-forest);font:600 var(--jz-t-meta)/1 var(--jz-sans)}
/* the expense form's line rows: label left, the value right on the card (no well), the pound sign inside the big field */
#app .rec .m-f.m-line{min-height:64px;white-space:nowrap;font:500 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-ink)}
#app .rec.rec.rec.rec .m-f.m-line :is(input,select){margin:0;min-height:48px;padding:0 4px;background:none;box-shadow:none;text-align:right;color:var(--jz-ink)}
#app .rec.rec.rec.rec .m-f.m-line :is(input,select):focus{box-shadow:inset 0 -2px 0 var(--jz-forest);border-radius:0}
#app .rec .m-f.m-line>.m-ic{margin-left:0;stroke:var(--jz-chev)}
#app .rec .m-gbp::after{left:32px;bottom:27px;font:800 34px/1 var(--jz-display);color:var(--jz-ink)}
#app .rec .m-gbp:has(input:placeholder-shown)::after{color:var(--jz-faint)}
#app .rec.rec.rec.rec .m-gbp input{padding-left:40px}
/* a note on the money pages: the round mark sits beside the words and a link stays in its sentence (it was a "!" on a
   line of its own, then the words, then the link broken onto a third line) */
#app .mn .alert:not(.info):not(.success){display:block;position:relative;padding:16px 18px 16px 56px;border:0;border-radius:var(--jz-r-inner);font:500 var(--jz-t-meta)/1.45 var(--jz-sans)}
#app .mn .alert:not(.info):not(.success)::before{position:absolute;left:18px;top:15px}
#app .mn .alert:not(.success):not(.info){padding:16px 18px 16px 56px;background:var(--jz-late-soft);color:var(--jz-ink)}
#app .mn .alert[role=alert]:not(.success):not(.info){background:var(--jz-danger-soft)}
#app .mn .alert a{font-weight:600;color:var(--jz-forest)}
#app .mn .alert.info::before{background:var(--jz-surface);color:var(--jz-ink)}
#app .rec .jz-lt h1{font-size:28px;line-height:1.1}
#app .rec.rec.rec.rec .m-f.m-line.pick select{padding-right:30px}
/* the lower half of a reminder or a send page: the care note is a card of its own (it read as loose small print), and
   Skip is a full-width quiet button, a proper target, not a floating word */
#app .mn .mn-note{margin:14px 0 0;padding:16px 18px;border-radius:var(--jz-r-inner);background:var(--jz-info-soft);color:var(--jz-ink)}
#app .mn .mn-note .jz-ic{color:var(--jz-info)}
#app .mn form.m-quiet:not(.m-under) button{width:100%;min-height:56px;border-radius:var(--jz-r-btn);box-shadow:inset 0 0 0 1.5px var(--jz-chev)}
#app .mn .mn-note+.m-group{margin-top:14px}