/* ══════════════════════════════════════════════════════════════
   THE NUT v2, skin only. No maths is touched by this file.
   Every number on screen still comes from the original engine.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:Basteleur;src:url("fonts/basteleur-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Basteleur;src:url("fonts/basteleur-moonlight.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Karrik;src:url("fonts/karrik-regular.woff2") format("woff2");font-display:swap}
:root{
  --nut-ink:#eef3e6; --nut-dim:#7a8a6c; --nut-ground:#080e06;
  --nut-green:#0a5c3d; --nut-lime:#a9e34b; --nut-yel:#ffcd00;
  --nut-blue:#1c4f7a; --nut-orange:#8a3312;
}
/* the hoard, behind everything */
body{background:var(--nut-ground) !important;font-family:Karrik,system-ui,sans-serif !important}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("hoard-tile.jpg");background-size:118px auto;background-repeat:repeat;
  background-position:50% 38%;
  filter:url(#nutLime) contrast(1.05);opacity:.44}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,20,11,.72) 0%,rgba(7,16,9,.56) 38%,rgba(6,11,5,.82) 100%)}
#app,.wrap,.pane,nav{position:relative;z-index:1}
/* money is Karrik with tabular figures, everywhere */
#pane-week .tile .big,#pane-week .tile .amt,.moneyrow,.money,.num,input[type=text],input[type=number],
.bestgrid,.shoulder,.wallbox,.pacewrap{font-variant-numeric:tabular-nums lining-nums}
/* headings are Basteleur */
h1,h2,h3{font-family:Basteleur,serif !important}
#pane-week .dow,#pane-week .sign,#pane-week .wallbox b{font-family:Basteleur,serif !important;font-weight:700 !important}
#pane-week .dmy, #pane-week .wkrange{font-family:Karrik,sans-serif !important}
/* tabs: quiet, no pills */
nav{background:#0b1208 !important;border:0 !important}
nav .tab-b{background:none !important;border:0 !important;color:#5d6b52 !important;
  font-family:Karrik,sans-serif !important;letter-spacing:.14em !important;text-transform:uppercase !important;
  font-size:11px !important;border-radius:0 !important}
nav .tab-b.on{color:var(--nut-ink) !important;box-shadow:inset 0 -3px 0 var(--nut-lime) !important}
/* the day / date block */
.headrow{padding:14px 18px 0 !important}
#pane-week .dow{font-family:Basteleur,serif !important;font-weight:300 !important;font-size:30px !important;
  color:var(--nut-ink) !important;letter-spacing:0 !important;text-transform:none !important}
#pane-week .dmy{color:var(--nut-dim) !important;font-size:11px !important;letter-spacing:.2em !important;
  text-transform:uppercase !important}
#pane-week .wkrange{color:var(--nut-dim) !important;font-size:10px !important;letter-spacing:.2em !important;
  text-transform:uppercase !important}
/* ── the tiles: cut to content, not full-width slabs ── */
.tiles{display:block !important;padding:0 !important;background:none !important;gap:0 !important}
#pane-week .tile{border-radius:0 !important;box-shadow:none !important;margin:0 !important}
/* hero: still to make, no background at all, it sits on the hoard */
#pane-week .tile.hi{background:none !important;padding:8px 18px 0 !important}
#pane-week .tile.hi .big, #pane-week .tile.hi b{font-family:Karrik,sans-serif !important;font-size:56px !important;
  letter-spacing:-.05em !important;color:var(--nut-ink) !important;text-shadow:0 2px 20px var(--nut-ground)}
/* make today, one chip: label + number together, note on bare ground */
#pane-week .tile.hot{background:none !important;padding:10px 18px 0 !important;display:block !important}
#pane-week .tile.hot .tl{background:var(--nut-yel) !important;color:#7a5f00 !important;
  padding:8px 15px 2px !important;display:block !important;width:max-content !important;max-width:100%;
  font-size:9.5px !important;letter-spacing:.2em !important;text-transform:uppercase !important;
  font-family:Karrik,sans-serif !important;margin:0 !important}
#pane-week .tile.hot .tv{background:var(--nut-yel) !important;color:#1d1600 !important;
  padding:0 15px 11px !important;display:block !important;width:max-content !important;max-width:100%;
  font-family:Karrik,sans-serif !important;font-size:40px !important;letter-spacing:-.045em !important;
  margin:0 !important;line-height:1}
#pane-week .tile.hot .tn{display:block !important;background:none !important;color:var(--nut-dim) !important;
  padding:7px 0 0 !important;font-size:12px !important;font-family:Karrik,sans-serif !important}
/* what you made, green, real field */
#pane-week .tile.earn{background:none !important;padding:10px 18px 0 !important}
#pane-week .tile.earn .moneyrow, #pane-week .tile.earn input{background:#0a5c3d !important;color:#eaf7ef !important;
  border:0 !important;border-radius:0 !important;font-family:Karrik,sans-serif !important}
#pane-week .tile.earn input::placeholder{color:#6d9d84 !important}
/* bank, blue */
#pane-week .tile.bank{background:none !important;padding:10px 18px 0 !important}
#pane-week .tile.bank .moneyrow, #pane-week .tile.bank input{background:#1c4f7a !important;color:#eaf2fb !important;
  border:0 !important;border-radius:0 !important;font-family:Karrik,sans-serif !important}
#pane-week .tile.bank input::placeholder{color:#79a4c8 !important}
#pane-week .confirm{background:#0f2233 !important;border:0 !important;border-radius:0 !important;
  color:#a3c6e2 !important;font-size:11.5px !important}
/* bills, one chip, flush left, note bare */
#pane-week .tile.bills{background:none !important;padding:10px 18px 0 !important;display:block !important}
#pane-week .tile.bills .tl{background:var(--nut-orange) !important;color:#e2a88c !important;
  padding:8px 15px 2px !important;display:block !important;width:max-content !important;max-width:100%;
  font-size:9.5px !important;letter-spacing:.2em !important;text-transform:uppercase !important;
  font-family:Karrik,sans-serif !important;margin:0 !important}
#pane-week .tile.bills .tv{background:var(--nut-orange) !important;color:#fbe6dc !important;
  padding:0 15px 11px !important;display:block !important;width:max-content !important;max-width:100%;
  font-family:Karrik,sans-serif !important;font-size:34px !important;letter-spacing:-.04em !important;
  margin:0 !important;line-height:1}
#pane-week .tile.bills .tn{display:block !important;background:none !important;color:var(--nut-dim) !important;
  padding:7px 0 0 !important;font-size:12px !important;font-family:Karrik,sans-serif !important}
/* the per-day rate, quiet */
#pane-week .tile.per{background:none !important;padding:10px 18px 0 !important;color:var(--nut-dim) !important}
#pane-week .tile.per .big, #pane-week .tile.per b{font-family:Karrik,sans-serif !important;color:var(--nut-lime) !important;
  font-size:32px !important;letter-spacing:-.04em !important}
/* labels everywhere */
#pane-week .tile .lbl,#pane-week .tile small,#pane-week .tile .cap,#pane-week .sign{font-size:9.5px !important;letter-spacing:.2em !important;
  text-transform:uppercase !important;color:var(--nut-dim) !important;font-family:Karrik,sans-serif !important;
  font-weight:400 !important}
#pane-week .tile.hot .lbl, #pane-week .tile.hot small{color:#7a5f00 !important}
#pane-week .tile.bills .lbl, #pane-week .tile.bills small{color:#e2a88c !important}
/* rules become space */
.rule,.rule.wide{background:none !important;border:0 !important;height:8px !important}
/* the pace band */
.pacewrap{padding:10px 18px 0 !important}
#pane-week .pacebar{background:#131c0c !important;border-radius:0 !important;height:7px !important}
#pane-week .pacebar > *{background:var(--nut-lime) !important;border-radius:0 !important}
/* the week strip, tappable day plates */
.shoulder{padding:10px 18px 0 !important;gap:2px !important;background:none !important}
#pane-week .shoulder > *{background:#0f1a0bcc !important;border:0 !important;border-radius:0 !important;
  color:var(--nut-dim) !important;font-size:9px !important;cursor:pointer}
#pane-week .shoulder > *.on, #pane-week .shoulder > *.today{background:var(--nut-yel) !important;color:#7a5f00 !important}
/* next big one, a rule, not a box */
.wallbox{background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:inset 4px 0 0 #f26430 !important;padding:6px 0 6px 14px !important;margin:0 18px !important}
/* what each day is worth */
.sect.days,.bestgrid{background:none !important}
#pane-week .bestgrid > *{background:#0f1a0bcc !important;border:0 !important;border-radius:0 !important}
/* coming at you */
.sect.coming{background:none !important}
#pane-week .sect.coming .sign{color:var(--nut-dim) !important}
/* alerts / status */
.alerts,.status{border-radius:0 !important}
#pane-week .status.setup{background:#0f1a0b !important;border:0 !important}
/* ── the pile, injected ── */
#nutPile{position:relative;height:132px;margin:8px 0 0;overflow:hidden;z-index:1}
#nutPile svg{position:absolute;inset:0;width:100%;height:100%}
#nutPile .cnt{position:absolute;left:18px;top:0;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--nut-dim);z-index:3}
#nutPile .cnt b{color:var(--nut-lime);font-weight:400}
#nutPile .ghosts{position:absolute;right:18px;top:0;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--nut-dim);z-index:3}
#nutPile.shake{animation:nutshk .4s cubic-bezier(.36,.07,.19,.97)}
#nutPile.pull{animation:nutpull .5s cubic-bezier(.3,0,.2,1)}
@keyframes nutshk{20%{transform:translate(-2px,2px)}
55%{transform:translate(3px,-1px)}
100%{transform:none}
}
@keyframes nutpull{30%{transform:translateY(6px) scaleY(.97)}
100%{transform:none}
}
#nutBurst{position:absolute;left:0;right:0;top:4px;text-align:center;font-family:Basteleur,serif;
  font-weight:700;font-size:23px;color:var(--nut-yel);opacity:0;pointer-events:none;z-index:5;
  text-shadow:0 3px 18px #000}
#nutBurst.go{animation:nutbu 1.4s cubic-bezier(.2,1.3,.3,1)}
#nutBurst.down{color:#f26430}
@keyframes nutbu{0%{opacity:0;transform:scale(.6)}
16%{opacity:1;transform:scale(1.1)}
30%{transform:scale(1)}
70%{opacity:1}
100%{opacity:0;transform:translateY(-20px)}
}
#nutFlash{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;background:#f2643022}
#nutFlash.go{animation:nutfl .5s ease-out}
@keyframes nutfl{0%{opacity:0}
22%{opacity:1}
100%{opacity:0}
}
#nutAnti{height:3px;margin:5px 18px 0;background:#131c0c;position:relative;overflow:hidden;z-index:1}
#nutAnti i{position:absolute;left:0;top:0;height:3px;width:0;background:var(--nut-yel);
  box-shadow:0 0 9px #ffcd0088}
#nutAnti.run i{animation:nutfill var(--t,800ms) cubic-bezier(.4,0,.9,.4) forwards}
@keyframes nutfill{from{width:0}to{width:100%}}
/* generic tile parts, so nothing else picks up a slab */
#pane-week .tile .tl{font-family:Karrik,sans-serif !important;font-size:9.5px !important;letter-spacing:.2em !important;
  text-transform:uppercase !important;color:var(--nut-dim) !important}
#pane-week .tile .tv{font-family:Karrik,sans-serif !important;letter-spacing:-.04em !important}
#pane-week .tile .tn{color:var(--nut-dim) !important;font-size:12px !important}
#pane-week .tile.hi .tv{font-size:56px !important;color:var(--nut-lime) !important}
#pane-week .tile.per .tv{font-size:32px !important;color:var(--nut-lime) !important}
#pane-week .tile.earn, #pane-week .tile.bank{padding-top:12px !important}
/* let the hoard show through more of the screen */
body::before{opacity:.62 !important}
body::after{background:linear-gradient(180deg,var(--nut-ground) 0%,#080e06ee 22%,#080e06cc 52%,#080e06a8 100%) !important}
/* ---- day cards: thumb-sized, and say what they do ---------------------- */
#pane-week #shoulder .mk input{
  min-height:44px !important; font-size:17px !important;
  padding:7px 4px !important; text-align:center !important;
  border-radius:9px !important;
}
#pane-week #shoulder .mk{ cursor:pointer; }
#pane-week #shoulder .mk.today input{ cursor:pointer; }
#pane-week #shoulder .mk.editing{ outline:2px solid var(--nut-yel); outline-offset:2px; }
/* the rules that were only in the source comments */
#pane-week .nut-hint{
  font:400 12.5px/1.45 "Karrik",system-ui,sans-serif;
  color:#9fae95; letter-spacing:.01em;
  margin:6px 2px 2px; display:block;
}
#pane-week .nut-hint b{ color:var(--nut-yel); font-weight:400; }

/* ---- thumb sizes on the things he touches every day -------------------- */
/* the two money boxes were 28px tall. A thumb needs 44. */
#pane-week #todayIn, #pane-week #bankIn,
#todayIn, #bankIn{
  min-height:46px !important;
  font-size:17px !important;      /* 17px also stops iOS zooming the page on focus */
  padding:11px 13px !important;
  border-radius:11px !important;
}
/* the five tabs were 34px tall, and sat under the iPhone home bar */
nav.tabs{
  min-height:56px !important;
  padding-bottom:env(safe-area-inset-bottom,0px) !important;
  box-sizing:content-box !important;
}
nav.tabs .tab-b, nav.tabs button, nav.tabs a{
  min-height:48px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
/* keep the page clear of the taller bar */
#pane-week{ padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important; }

/* the last three under-sized controls */
#bankReal{ min-height:46px !important; font-size:17px !important; padding:11px 13px !important; border-radius:11px !important; }
#undoHere{ min-height:44px !important; padding:10px 16px !important; }
#frHide{ min-height:44px !important; padding:10px 16px !important; }

/* ══════════════════════════════════════════════════════════════
   THE OTHER FOUR TABS, bills, goals, month, setup.
   Same rules as the week screen: one ground, colour only where it
   means something, rows separated by space and a shared left edge
   instead of coloured slabs. Headings are Basteleur, big and in
   sentence case, because that face falls apart as tracked micro-caps.
   The signature is the squirrel photo riding in each bill row.
   ══════════════════════════════════════════════════════════════ */

/* ── one ground. The green slabs go. ── */
#pane-bills .sect, #pane-bills .yard, #pane-goals .sect, #pane-goals .yard,
#pane-month .cal, #pane-setup .yard, .sect, .yard, .cal{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important;
}
#pane-bills, #pane-goals, #pane-month, #pane-setup{
  background:none !important;
  padding:2px 0 calc(80px + env(safe-area-inset-bottom,0px)) !important;
}
.void{display:none !important}
.sign, .sign.right{background:none !important;border:0 !important;padding:0 !important;
  text-align:left !important}

/* ── type. Basteleur only big and in sentence case. ── */
#pane-bills h2, #pane-goals h2, #pane-month h2, #pane-setup h2, .yard h2, .sign h2{
  font-family:Basteleur,serif !important; font-weight:300 !important;
  font-size:27px !important; line-height:1.12 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--nut-ink) !important; margin:26px 20px 4px !important; max-width:20ch;
}
#pane-setup .yard h2{margin-top:34px !important}
.tapnote, .hint, .empty{
  font-family:Karrik,sans-serif !important; font-size:12.5px !important;
  line-height:1.5 !important; color:var(--nut-dim) !important;
  letter-spacing:0 !important; text-transform:none !important;
  margin:0 20px 14px !important; max-width:40ch;
}

/* ── bills: a ledger, not a stack of boxes ── */
#billList{margin:6px 0 0 !important;padding:0 !important;background:none !important}
#pane-bills .brow{
  display:grid !important;
  grid-template-columns:52px 1fr auto 40px !important;
  align-items:center !important; gap:0 13px !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:11px 16px 11px 20px !important; margin:0 !important;
  box-shadow:inset 0 -1px 0 rgba(233,240,220,.075) !important;
}
#pane-bills .brow .dest{display:block !important;min-width:0}
#pane-bills .brow .nm{
  display:block !important;
  font-family:Basteleur,serif !important; font-weight:700 !important;
  font-size:18px !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--nut-ink) !important; line-height:1.15 !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#pane-bills .brow .when{
  display:block !important; margin-top:3px !important;
  font-family:Karrik,sans-serif !important; font-size:11px !important;
  color:var(--nut-dim) !important; letter-spacing:.02em !important;
  text-transform:none !important; line-height:1.3 !important;
}
#pane-bills .brow .when u{text-decoration:none !important;color:#95a888 !important}
#pane-bills .brow .edit{
  display:inline-block !important; margin-left:8px !important;
  color:#5f6f55 !important; font-size:10px !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
}
#pane-bills .brow .amt{
  display:block !important; text-align:right !important;
  font-family:Karrik,sans-serif !important; font-size:18px !important;
  font-variant-numeric:tabular-nums lining-nums !important;
  color:var(--nut-ink) !important; letter-spacing:-.02em !important;
  background:none !important; padding:0 !important;
}
#pane-bills .brow .amt small{
  display:block !important; margin-top:3px !important;
  font-size:10px !important; color:#5f6f55 !important; letter-spacing:0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:26ch;
}
#pane-bills .brow .kill{
  width:40px !important; height:44px !important; min-height:44px !important;
  background:none !important; border:0 !important; color:#4c5a44 !important;
  font-size:19px !important; line-height:1 !important; padding:0 !important;
  border-radius:10px !important;
}
#pane-bills .brow .kill:hover, #pane-bills .brow .kill:active{
  color:#d4643a !important; background:rgba(212,100,58,.11) !important;
}
/* the squirrel that skin.js drops in front of each bill */
#pane-bills .brow .nutface{
  width:52px !important; height:52px !important; border-radius:50% !important;
  object-fit:cover !important; display:block !important;
  box-shadow:0 0 0 1px rgba(233,240,220,.13), 0 5px 14px rgba(0,0,0,.5);
}
#pane-bills .brow .nutface.none{
  background:radial-gradient(circle at 38% 34%, #23301c, #10180d);
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.09);
}

/* the two buttons above the list */
.billbar{display:flex !important;gap:10px !important;margin:4px 20px 10px !important;
  background:none !important;padding:0 !important;flex-wrap:wrap}
.billbar button{
  min-height:44px !important; padding:0 17px !important;
  font-family:Karrik,sans-serif !important; font-size:11px !important;
  letter-spacing:.15em !important; text-transform:uppercase !important;
  border-radius:11px !important; background:none !important;
  border:1px solid rgba(233,240,220,.18) !important; color:#9aab8d !important;
}
.billbar button.wipe{border-color:rgba(212,100,58,.42) !important;color:#c4744a !important}

/* the totals under the list: shared left edge, one accent only */
#pane-bills .wallbox, #pane-bills .bestgrid, #goalTot,
#pane-bills .sect > div:not(#billList):not(.billbar):not(.sign){
  background:none !important; border:0 !important;
}

/* ── month: a real calendar, hairlines instead of boxes ── */
#pane-month .calhead{
  display:flex !important; align-items:center !important; gap:9px !important;
  flex-wrap:wrap !important; padding:0 20px !important; margin:22px 0 10px !important;
  background:none !important;
}
#pane-month .calhead .mo{
  font-family:Basteleur,serif !important; font-weight:300 !important;
  font-size:27px !important; letter-spacing:0 !important;
  text-transform:capitalize !important; color:var(--nut-ink) !important; margin-right:4px;
}
#pane-month .calhead .hint{flex-basis:100% !important;margin:8px 0 0 !important;padding:0 !important}
button.ghost{
  min-height:44px !important; min-width:44px !important; padding:0 15px !important;
  background:none !important; border:1px solid rgba(233,240,220,.16) !important;
  color:#9aab8d !important; border-radius:11px !important;
  font-family:Karrik,sans-serif !important; font-size:11px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
}
button.ghost:hover{border-color:rgba(233,240,220,.34) !important;color:var(--nut-ink) !important}
#pane-month .calgrid{
  background:none !important; gap:0 !important; padding:0 14px !important;
  border-top:1px solid rgba(233,240,220,.09) !important;
}
#pane-month .cdn{
  background:none !important; border:0 !important; color:#5f6f55 !important;
  font-family:Karrik,sans-serif !important; font-size:9px !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  padding:9px 0 7px 4px !important; text-align:left !important;
}
#pane-month .cd{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:inset -1px -1px 0 rgba(233,240,220,.07) !important;
  min-height:66px !important; padding:5px 3px 4px 4px !important;
}
#pane-month .cd.out{opacity:.3 !important}
#pane-month .cd .dn{
  font-family:Karrik,sans-serif !important; font-size:12px !important;
  color:#8b9c80 !important; font-variant-numeric:tabular-nums !important;
  padding:0 0 3px !important;
}
#pane-month .cd.today{box-shadow:inset 0 0 0 2px var(--nut-yel) !important}
#pane-month .cd.today .dn{color:var(--nut-yel) !important}
/* a bill on a day: a mark on the ground, not a filled brick */
#pane-month .cd .chip{
  background:none !important; border:0 !important; border-radius:0 !important;
  border-left:2px solid #b4552b !important;
  padding:1px 0 2px 4px !important; margin:0 0 3px !important;
  display:block !important; position:relative; min-height:0 !important;
}
#pane-month .cd .chip span{
  display:block !important; font-family:Karrik,sans-serif !important;
  font-size:8.5px !important; line-height:1.2 !important; color:#cf9070 !important;
  letter-spacing:.01em !important; text-transform:none !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:12px;
}
#pane-month .cd .chip b{
  display:block !important; font-family:Karrik,sans-serif !important;
  font-size:9.5px !important; line-height:1.25 !important; color:#e8d7c6 !important;
  font-weight:400 !important; font-variant-numeric:tabular-nums !important;
}
#pane-month .cd .chip .tick{
  position:absolute !important; right:0 !important; top:0 !important;
  width:13px !important; height:13px !important; min-height:0 !important; padding:0 !important;
  background:none !important; border:1px solid rgba(233,240,220,.3) !important;
  border-radius:3px !important;
}
#pane-month .cd .chip .tick.on, #pane-month .cd .chip .tick[data-on="1"]{
  background:var(--nut-lime) !important; border-color:var(--nut-lime) !important;
}
#pane-month .cd .chip.paid{border-left-color:#4e7a3a !important;opacity:.55}
#pane-month .cd .chip.paid span, #pane-month .cd .chip.paid b{
  text-decoration:line-through !important; color:#7e9070 !important;
}
/* the week column on the right */
#pane-month .cw{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:inset -1px -1px 0 rgba(233,240,220,.07) !important;
  padding:6px 5px !important;
}
#pane-month .cw .cl{
  display:block !important; font-family:Karrik,sans-serif !important;
  font-size:8px !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#5f6f55 !important;
}
#pane-month .cw .cv{
  display:block !important; font-family:Karrik,sans-serif !important;
  font-size:15px !important; color:var(--nut-lime) !important;
  font-variant-numeric:tabular-nums !important; margin:1px 0 2px !important;
}
#pane-month .cdn.wkcol{color:#5f6f55 !important}

/* ── goals + setup: quiet fields ── */
.formgrid{display:block !important;background:none !important;padding:0 !important;gap:0 !important}
.field{margin:0 20px 15px !important;background:none !important;padding:0 !important}
.field label{
  display:block !important; margin:0 0 6px !important;
  font-family:Karrik,sans-serif !important; font-size:9.5px !important;
  letter-spacing:.19em !important; text-transform:uppercase !important;
  color:#5f6f55 !important;
}
input.f, select.f, #pane-goals input, #pane-setup input, #pane-setup select{
  width:100% !important; min-height:48px !important;
  background:rgba(6,11,5,.62) !important;
  border:1px solid rgba(233,240,220,.13) !important; border-radius:11px !important;
  color:var(--nut-ink) !important; font-family:Karrik,sans-serif !important;
  font-size:16.5px !important; padding:12px 14px !important;
  box-shadow:none !important; -webkit-appearance:none; appearance:none;
}
select.f{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8'><path d='M1 1l5.5 5.5L12 1' fill='none' stroke='%237a8a6c' stroke-width='1.7'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 15px center !important;
  padding-right:40px !important;}
input.f:focus, select.f:focus{outline:none !important;border-color:var(--nut-lime) !important}
input.f::placeholder{color:#4c5a44 !important}
button.go{
  width:100% !important; min-height:50px !important;
  background:var(--nut-lime) !important; color:#132000 !important; border:0 !important;
  border-radius:12px !important; font-family:Karrik,sans-serif !important;
  font-size:12px !important; letter-spacing:.16em !important; text-transform:uppercase !important;
}
.rowbtns{display:flex !important;gap:10px !important;flex-wrap:wrap !important;
  margin:0 20px 6px !important;background:none !important;padding:0 !important}
#goalList .empty{margin:0 20px 8px !important}
#goalTot{margin:6px 20px 0 !important;color:var(--nut-ink) !important}

/* a 13px tick can't grow in a 7-column calendar, so grow its reach instead */
#pane-month .cd .chip .tick{overflow:visible !important}
#pane-month .cd .chip .tick::after{
  content:""; position:absolute; top:-11px; right:-9px; bottom:-11px; left:-11px;
}

/* ── bills, second pass: give the name its room back ── */
#pane-bills .brow{grid-template-columns:52px minmax(0,1fr) 112px 40px !important}
#pane-bills .brow .nm{font-size:17px !important}
#pane-bills .brow .when{
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#pane-bills .brow .amt{
  width:112px !important; font-size:17px !important; line-height:1.1 !important;
}
#pane-bills .brow .amt small{
  white-space:normal !important; max-width:none !important;
  font-size:9px !important; line-height:1.3 !important; margin-top:4px !important;
}
/* the totals: shared right edge, one accent, no slabs */
#pane-bills .btot{
  display:flex !important; align-items:baseline !important; justify-content:space-between !important;
  gap:12px !important; background:none !important; border:0 !important; border-radius:0 !important;
  padding:13px 20px !important; margin:0 !important;
  box-shadow:inset 0 -1px 0 rgba(233,240,220,.075) !important;
}
#pane-bills .btot span:first-child{
  font-family:Karrik,sans-serif !important; font-size:10px !important;
  letter-spacing:.18em !important; text-transform:uppercase !important; color:#5f6f55 !important;
}
#pane-bills .btot b, #pane-bills .btot .mono{
  font-family:Karrik,sans-serif !important; font-weight:400 !important;
  font-size:19px !important; color:var(--nut-ink) !important;
  font-variant-numeric:tabular-nums lining-nums !important;
}
#pane-bills .btot.final{box-shadow:none !important;padding-top:16px !important}
#pane-bills .btot.final span:first-child{color:#9aab8d !important}
#pane-bills .btot.final b, #pane-bills .btot.final .mono{
  font-size:30px !important; color:var(--nut-lime) !important; letter-spacing:-.03em !important;
}
#pane-bills .btot span:last-child:empty{display:none !important}
#pane-bills .grand{
  display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:0 !important;
  background:none !important; padding:6px 20px 0 !important; margin:0 !important;
  border-top:1px solid rgba(233,240,220,.075) !important;
}
#pane-bills .grand .g3{
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:12px 10px 12px 0 !important; margin:0 !important;
}
#pane-bills .grand .g3 .l{
  display:block !important; font-family:Karrik,sans-serif !important; font-size:9px !important;
  letter-spacing:.16em !important; text-transform:uppercase !important; color:#5f6f55 !important;
  margin-bottom:5px !important;
}
#pane-bills .grand .g3 b, #pane-bills .grand .g3 .mono{
  font-family:Karrik,sans-serif !important; font-weight:400 !important; font-size:17px !important;
  color:#c3d1b6 !important; font-variant-numeric:tabular-nums lining-nums !important;
}
#pane-bills .grand .g3.mo b, #pane-bills .grand .g3.mo .mono{color:var(--nut-ink) !important}

/* ── bills, third pass: keep EDIT reachable, dress the drop zone ── */
#pane-bills .brow .when{
  display:flex !important; align-items:baseline !important; gap:7px !important;
  white-space:nowrap !important; overflow:hidden !important;
}
#pane-bills .brow .when > u,
#pane-bills .brow .when{min-width:0}
#pane-bills .brow .edit{
  margin-left:auto !important; flex:0 0 auto !important; padding-left:6px !important;
  color:#7d8f70 !important;
}

/* drop a screenshot: a marked-out patch of ground, not a grey slab */
#pane-bills .drop{
  background:none !important; border:1px dashed rgba(233,240,220,.22) !important;
  border-radius:14px !important; margin:8px 20px 0 !important;
  padding:24px 20px !important; text-align:center !important; box-shadow:none !important;
}
#pane-bills .drop:hover{border-color:var(--nut-lime) !important;background:rgba(169,227,75,.04) !important}
#pane-bills .drop .dh{
  font-family:Basteleur,serif !important; font-weight:300 !important;
  font-size:21px !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--nut-ink) !important; margin:0 0 7px !important;
}
#pane-bills .drop .ds{
  font-family:Karrik,sans-serif !important; font-size:11.5px !important;
  line-height:1.55 !important; color:var(--nut-dim) !important;
  letter-spacing:0 !important; text-transform:none !important; margin:0 !important;
}
textarea.f{
  width:100% !important; min-height:130px !important; resize:vertical !important;
  background:rgba(6,11,5,.62) !important; border:1px solid rgba(233,240,220,.13) !important;
  border-radius:11px !important; color:var(--nut-ink) !important;
  font-family:ui-monospace,Menlo,Consolas,monospace !important; font-size:13px !important;
  line-height:1.6 !important; padding:13px 14px !important;
}
textarea.f:focus{outline:none !important;border-color:var(--nut-lime) !important}
button.go.pale{
  background:none !important; color:var(--nut-lime) !important;
  border:1px solid rgba(169,227,75,.45) !important;
}
#pane-bills .prog{margin:10px 20px 0 !important;background:rgba(233,240,220,.09) !important;
  height:3px !important;border-radius:2px !important;overflow:hidden}
#pane-bills .prog i{background:var(--nut-lime) !important;display:block;height:100%}
#pane-bills .progtxt{margin:7px 20px 0 !important;font-family:Karrik,sans-serif !important;
  font-size:11px !important;color:var(--nut-dim) !important}
#pane-bills pre.raw{margin:10px 20px 0 !important;font-size:11px !important;
  color:#5f6f55 !important;white-space:pre-wrap;background:none !important;border:0 !important}

/* ── month, second pass ── */
/* Basteleur's alternates read as typos in all caps. Lowercase suits it. */
#pane-month .calhead .mo{
  text-transform:lowercase !important; flex-basis:100% !important;
  margin:0 0 10px !important; font-size:31px !important;
}
#pane-month .calhead{gap:8px !important}
/* today: a ring in the app's own yellow, not a white slab */
#pane-month .cd.today{
  border:0 !important; outline:0 !important; background:none !important;
  box-shadow:inset 0 0 0 2px var(--nut-yel), inset -1px -1px 0 rgba(233,240,220,.07) !important;
}
/* let a bill name use two lines instead of turning into "Groo..." */
#pane-month .cd .chip span{
  white-space:normal !important; overflow:hidden !important;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  text-overflow:clip !important; padding-right:15px !important;
  font-size:8px !important; line-height:1.15 !important;
}

/* ── the paid tick: a 26px target wearing a 12px box ── */
#pane-month .cd, #pane-month .cd .chip{overflow:visible !important}
#pane-month .cd .chip .tick{
  position:absolute !important; right:-4px !important; top:-5px !important;
  width:26px !important; height:26px !important; min-height:0 !important;
  padding:0 !important; background:none !important; border:0 !important;
  border-radius:0 !important;
}
#pane-month .cd .chip .tick::after{content:none !important}
#pane-month .cd .chip .tick::before{
  content:""; position:absolute; right:7px; top:7px; width:12px; height:12px;
  border:1px solid rgba(233,240,220,.32); border-radius:3px; box-sizing:border-box;
}
#pane-month .cd .chip .tick.on::before, #pane-month .cd .chip .tick[data-on="1"]::before{
  background:var(--nut-lime); border-color:var(--nut-lime);
}
#pane-month .cd .chip span{padding-right:22px !important}
/* keep the tick off the bill name */
#pane-month .cd .chip .tick{right:-2px !important;top:-3px !important}
#pane-month .cd .chip span{padding-right:26px !important}

/* ── last pass across the four tabs ── */
#pane-bills h2, #pane-goals h2, #pane-month h2, #pane-setup h2{margin-bottom:12px !important}
#pane-setup .yard > h2:first-child{margin-top:30px !important}
.sign{border:0 !important;box-shadow:none !important}
.sign h2{border:0 !important}
/* anything that wipes data stays quiet, but reads as the odd one out */
#wipeBtn, .billbar button.wipe{
  border-color:rgba(212,100,58,.42) !important; color:#c4744a !important;
}
#wipeBtn:hover, .billbar button.wipe:hover{
  border-color:#c4744a !important; background:rgba(196,116,74,.1) !important; color:#e08a5c !important;
}
/* the date field's native picker icon, made to match */
input[type=date].f::-webkit-calendar-picker-indicator{filter:invert(.62) sepia(.2);cursor:pointer}

/* ══════════════════════════════════════════════════════════════
   BILL CARDS, CROWS, AND THE RECORD
   ══════════════════════════════════════════════════════════════ */
#nutCards{position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none;z-index:6;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding:0 16px 8px}
.nutcard{
  display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px;
  width:100%; max-width:330px; padding:8px 13px 8px 9px; border-radius:13px;
  opacity:0; transform:translateY(16px) scale(.94);
  transition:opacity .34s cubic-bezier(.2,.9,.3,1), transform .34s cubic-bezier(.2,1.3,.4,1);
  will-change:transform,opacity;
}
.nutcard.in{opacity:1;transform:none}
.nutcard.out{opacity:0;transform:translateY(-26px) scale(.97) rotate(-2deg);
  transition:opacity .55s ease, transform .55s cubic-bezier(.5,0,.75,0)}
.nutcard .nc-face{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none}
.nutcard .nc-face img{width:100%;height:100%;object-fit:cover;display:block}
.nutcard .nc-blank{display:block;width:100%;height:100%;
  background:radial-gradient(circle at 38% 34%,#23301c,#10180d)}
.nutcard .nc-txt{min-width:0}
.nutcard .nc-txt b{display:block;font-family:Basteleur,serif;font-weight:700;font-size:15px;
  line-height:1.1;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nutcard .nc-txt i{display:block;font-family:Karrik,sans-serif;font-style:normal;font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;margin-top:3px}
.nutcard .nc-amt{font-family:Karrik,sans-serif;font-size:19px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* still coming: an outline you can see through */
.nutcard.ghost{background:rgba(8,14,6,.5);border:1px dashed rgba(233,240,220,.3);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.nutcard.ghost .nc-txt b{color:#c3d1b6}
.nutcard.ghost .nc-txt i{color:#7d8f70}
.nutcard.ghost .nc-amt{color:#c3d1b6}
.nutcard.ghost .nc-face{opacity:.62;filter:grayscale(.45)}
/* it came out: solid, and it is orange because that is money leaving */
.nutcard.paid{background:#7d2f10;border:1px solid #a5522c;
  box-shadow:0 12px 34px rgba(0,0,0,.62)}
.nutcard.paid .nc-txt b{color:#fdf1e6}
.nutcard.paid .nc-txt i{color:#e6a985}
.nutcard.paid .nc-amt{color:#ffcd00}

/* the crows. Only ever on screen when you cannot cover it. */
#nutCrows{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;
  transition:opacity .8s ease}
#nutCrows.on{opacity:1}
#nutCrows svg{position:absolute;width:34px;height:auto;color:#05080a;overflow:visible}
#nutCrows.on svg{animation:crowfly 9s linear infinite}
#nutCrows svg g{animation:crowflap .34s ease-in-out infinite alternate;transform-origin:8px -6px}
#nutCrows .cw0{top:4%;animation-delay:0s}
#nutCrows .cw1{top:20%;animation-delay:-2.1s;width:26px}
#nutCrows .cw2{top:38%;animation-delay:-4.4s;width:41px}
#nutCrows .cw3{top:11%;animation-delay:-6.2s;width:22px}
#nutCrows .cw4{top:29%;animation-delay:-7.5s;width:31px}
@keyframes crowfly{
  0%{transform:translateX(-70px) translateY(0)}
  50%{transform:translateX(210px) translateY(13px)}
  100%{transform:translateX(490px) translateY(0)}
}
@keyframes crowflap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
/* the ground goes cold under them */
#nutPile.threat::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,12,.62),rgba(4,8,12,0) 62%)}
#nutPile.threat .cnt b{color:#c4744a}

/* the record under the calendar */
#nutRail{margin:20px 0 0;padding:0}
#nutRail h2{margin:0 20px 10px !important}
#nutRail .nr-strip{
  display:flex; gap:10px; overflow-x:auto; overflow-y:hidden;
  padding:2px 20px 14px; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#nutRail .nr-strip::-webkit-scrollbar{display:none}
#nutRail .nutcard{
  opacity:1; transform:none; width:auto; min-width:236px; flex:0 0 auto;
  scroll-snap-align:start;
}
#nutRail .nr-none{
  font-family:Karrik,sans-serif; font-size:12.5px; line-height:1.5;
  color:var(--nut-dim); margin:0; max-width:40ch;
}

/* ── the pile stays clear: only a bill that just came out covers it ── */
#nutCards{justify-content:center}
#nutCards .nutcard{max-width:306px}

/* what is coming: a slim strip under the pile, swipes sideways */
#nutComing{margin:2px 0 0;padding:0}
#nutComing.empty{display:none}
#nutComing .nk-lbl{
  display:block;font-family:Karrik,sans-serif;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--nut-dim);margin:0 20px 6px;
}
#nutComing .nk-strip{
  display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding:1px 20px 10px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
#nutComing .nk-strip::-webkit-scrollbar{display:none}
#nutComing .nutcard{
  width:auto;min-width:196px;flex:0 0 auto;scroll-snap-align:start;
  grid-template-columns:30px 1fr auto;gap:9px;padding:7px 11px 7px 8px;
}
#nutComing .nutcard .nc-face{width:30px;height:30px}
#nutComing .nutcard .nc-txt b{font-size:13.5px}
#nutComing .nutcard .nc-txt i{font-size:8.5px;margin-top:2px}
#nutComing .nutcard .nc-amt{font-size:15px}

/* the crows read as silhouettes, so the sky behind them has to lift.
   The old version darkened it, which hid the birds completely. */
#nutPile.threat::before{
  background:linear-gradient(180deg,rgba(150,168,178,.30) 0%,rgba(120,140,150,.13) 42%,rgba(4,8,12,0) 78%) !important;
}
#nutCrows svg{color:#080c0a !important;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}

/* ── crows: spread across the sky, each on its own drift ── */
#nutCrows svg{width:32px}
#nutCrows.on svg{animation:crowfly 11s linear infinite}
#nutCrows svg g{transform-origin:50% 60%}
#nutCrows .cw0{left:-6%;top:6%;width:34px;animation-delay:0s}
#nutCrows .cw1{left:16%;top:26%;width:24px;animation-delay:-2.6s}
#nutCrows .cw2{left:38%;top:2%;width:42px;animation-delay:-5.1s}
#nutCrows .cw3{left:58%;top:31%;width:21px;animation-delay:-7.4s}
#nutCrows .cw4{left:76%;top:14%;width:29px;animation-delay:-9.2s}
#nutCrows .cw0 g{animation-duration:.38s}
#nutCrows .cw1 g{animation-duration:.29s}
#nutCrows .cw2 g{animation-duration:.44s}
#nutCrows .cw3 g{animation-duration:.26s}
#nutCrows .cw4 g{animation-duration:.34s}
@keyframes crowfly{
  0%{transform:translateX(-56px) translateY(0)}
  30%{transform:translateX(60px) translateY(11px)}
  62%{transform:translateX(150px) translateY(-7px)}
  100%{transform:translateX(300px) translateY(4px)}
}
@keyframes crowflap{from{transform:scaleY(1)}to{transform:scaleY(.42)}}
/* a colder, thinner haze. It should read as weather, not as fog on the lens. */
#nutPile.threat::before{
  background:linear-gradient(180deg,rgba(146,166,178,.22) 0%,rgba(110,132,144,.09) 46%,rgba(4,8,12,0) 80%) !important;
}
#nutPile .cnt s{text-decoration:none;color:var(--nut-dim);letter-spacing:.16em}

/* ══════════════════════════════════════════════════════════════
   CONTRAST: nothing light on the yellow.
   Today's card is #ffcd00. The day name, the date and the number were all
   coming through near white, and the date at 28% opacity on top of that,
   which is unreadable on a phone in daylight. Yellow carries dark ink only.
   ══════════════════════════════════════════════════════════════ */
#pane-week #shoulder .mk.today .d{ color:#2a2000 !important; opacity:1 !important }
#pane-week #shoulder .mk.today .n{ color:#6b5500 !important; opacity:1 !important }
#pane-week #shoulder .mk.today .bill{ color:#6b5500 !important; opacity:1 !important }
#pane-week #shoulder .mk.today input{
  color:#1d1600 !important; font-weight:400 !important;
  -webkit-text-fill-color:#1d1600 !important;   /* iOS ignores color on readonly */
}
#pane-week #shoulder .mk.today input::placeholder{ color:rgba(29,22,0,.42) !important }
/* the white cap strip above it was pure white against the yellow */
#pane-week #shoulder .mk.today .cap{ background:#2a2000 !important }
#pane-week #shoulder .mk .cap{ background:rgba(233,240,220,.22) !important }
#pane-week #shoulder .mk.done .cap{ background:var(--nut-lime) !important }
#pane-week #shoulder .mk.part .cap{ background:#7d8f70 !important }

/* the pace bar: keep the fill dark enough for its own label to sit on it */
#pane-week #paceFill.ok{ background:var(--nut-lime) !important }
#pane-week #paceFill.short{ background:#c4744a !important }
#pane-week #paceLabel{ color:#9aab8d !important }
/* any yellow chip anywhere carries dark ink */
#pane-week .tile.hot .tl{ color:#5c4700 !important }
#pane-week .tile.hot .tv{ color:#1d1600 !important }

/* the walkthrough bar */
#nutDemoBar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:none; align-items:center; gap:12px;
  padding:13px 18px calc(13px + env(safe-area-inset-bottom,0px));
  background:#0d1508; border-top:1px solid rgba(169,227,75,.34);
  box-shadow:0 -14px 34px rgba(0,0,0,.6);
}
#nutDemoBar.on{display:flex}
#nutDemoBar .nd-txt{
  flex:1; min-width:0; font-family:Karrik,sans-serif; font-size:12px; line-height:1.4;
  color:#c3d1b6; letter-spacing:.01em;
}
#nutDemoBar .nd-stop{
  flex:0 0 auto; min-height:40px; padding:0 16px; border-radius:10px;
  background:none; border:1px solid rgba(233,240,220,.24); color:#9aab8d;
  font-family:Karrik,sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}

/* ── the swiper: in from the left, out the right, gone ── */
#nutSwiper{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  pointer-events:none; z-index:7; overflow:hidden; opacity:0;
}
#nutSwiper img{
  position:absolute; bottom:6px; left:-92px; width:84px; height:84px;
  border-radius:50%; object-fit:cover; display:block;
  box-shadow:0 8px 22px rgba(0,0,0,.62), 0 0 0 2px rgba(8,14,6,.9);
}
#nutSwiper.go{opacity:1}
#nutSwiper.go img{ animation:nutswipe 1.15s cubic-bezier(.3,.05,.25,1) forwards }
@keyframes nutswipe{
  0%   { transform:translateX(0) translateY(6px) rotate(-8deg) scale(.9) }
  34%  { transform:translateX(210px) translateY(-4px) rotate(4deg) scale(1.06) }
  46%  { transform:translateX(250px) translateY(2px) rotate(-3deg) scale(1) }
  100% { transform:translateX(560px) translateY(-8px) rotate(9deg) scale(.86) }
}
@media (prefers-reduced-motion:reduce){
  #nutSwiper.go img{animation-duration:.01s}
}
/* if the bandit's picture is missing, do not leave a hole */
#nutSwiper.noart img{display:none}
#nutSwiper.noart.go::before{
  content:""; position:absolute; bottom:10px; left:0; width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle at 40% 36%,#7a4a22,#2b1a0d);
  box-shadow:0 8px 22px rgba(0,0,0,.6);
  animation:nutswipe 1.15s cubic-bezier(.3,.05,.25,1) forwards;
}

/* ══════════════════════════════════════════════════════════════
   NEED OR WANT
   A question on each bill, not a category. The unanswered state is
   the loud one on purpose: the asking is the whole point.
   ══════════════════════════════════════════════════════════════ */
#pane-bills .brow .when{flex-wrap:wrap}
.nutkind{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
  margin-left:8px; padding:3px 9px; min-height:24px; border-radius:99px;
  font-family:Karrik,sans-serif !important; font-size:9px !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  cursor:pointer; white-space:nowrap; line-height:1;
}
.nutkind.need{ background:rgba(233,240,220,.07); color:#7d8f70; }
.nutkind.want{ background:rgba(255,205,0,.15); color:var(--nut-yel); }
.nutkind.ask{
  background:none; color:#a9e34b;
  box-shadow:inset 0 0 0 1px rgba(169,227,75,.5);
}
.nutkind.open{ padding:0; background:none !important; box-shadow:none !important; gap:5px; }
.nk-pick{
  min-height:30px; padding:0 12px; border-radius:99px; border:0; cursor:pointer;
  font-family:Karrik,sans-serif; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; line-height:1;
}
.nk-pick.need{ background:rgba(233,240,220,.12); color:#c3d1b6; }
.nk-pick.want{ background:var(--nut-yel); color:#1d1600; }
.nk-pick:active{ transform:scale(.95) }

/* the one number the question exists to produce */
#nutKindBar{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:2px 20px 12px; padding:11px 0 0;
  border-top:1px solid rgba(233,240,220,.075);
}
#nutKindBar .nkb-ask{
  font-family:Karrik,sans-serif; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#5f6f55;
}
#nutKindBar.asking .nkb-ask{ color:#a9e34b; }
#nutKindBar .nkb-sum{
  font-family:Karrik,sans-serif; font-size:12.5px; color:var(--nut-dim);
  font-variant-numeric:tabular-nums lining-nums;
}
#nutKindBar .nkb-sum b{ color:var(--nut-yel); font-weight:400; font-size:16px; }
#nutKindBar .nkb-ask{margin-right:auto}

/* ── the question sits on the money side, one line per bill ── */
/* The per-row breakdown repeated three derived numbers on every single row and
   the same three totals sit at the bottom of the list. It was noise, and the
   pill needs the room more than it did. */
#pane-bills .brow .amt small{ display:none !important }
#pane-bills .brow .when{
  flex-wrap:nowrap !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#pane-bills .brow .amt{
  display:flex !important; flex-direction:column !important;
  align-items:flex-end !important; gap:5px !important; width:118px !important;
}
#pane-bills .brow .nutkind{ margin-left:0 !important }
#pane-bills .brow{ grid-template-columns:52px minmax(0,1fr) 118px 40px !important }


/* ── the bill row, laid out properly ──────────────────────────────────
   Name and money on the first line, the question on its own line beneath,
   picture and delete spanning both. The pill used to sit in the money
   column, which pushed every name into an ellipsis.
   The meta line is plain inline text, not a flex row: as a flex row with
   nowrap the items were squeezed under their own width and EDIT printed
   straight through the date. */
#pane-bills .brow{
  grid-template-columns:52px minmax(0,1fr) auto 40px !important;
  grid-template-rows:auto auto !important;
  row-gap:2px !important;
  align-items:center !important;
}
#pane-bills .brow .nutface{ grid-column:1 !important; grid-row:1 / 3 !important; align-self:center !important }
#pane-bills .brow .dest   { grid-column:2 !important; grid-row:1 !important }
#pane-bills .brow .amt    { grid-column:3 !important; grid-row:1 !important;
                            display:block !important; width:auto !important; min-width:96px !important }
#pane-bills .brow .kill   { grid-column:4 !important; grid-row:1 / 3 !important; align-self:center !important }
#pane-bills .brow .nutkind{ grid-column:2 / 4 !important; grid-row:2 !important;
                            justify-self:end !important; margin:1px 0 0 !important }
#pane-bills .brow .when{
  display:block !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#pane-bills .brow .edit{
  margin-left:9px !important; display:inline !important; float:none !important;
}
#pane-bills .brow .nm{ font-size:17.5px !important }

/* a bill name should wrap, not get cut off. "Car Charg..." tells you less
   than two short lines do, and there is room on the second line already. */
#pane-bills .brow .nm{
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  font-size:16.5px !important; line-height:1.1 !important;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important;
}
#pane-bills .brow{ gap:0 11px !important }
#pane-bills .brow .nutface{ width:46px !important; height:46px !important }
#pane-bills .brow .amt{ font-size:17px !important; min-width:88px !important }
#pane-bills .brow .when{ font-size:10.5px !important }

/* ── what to cut, driven by your own answers ── */
#pane-week .trim{
  background:none !important; border:0 !important; border-radius:0 !important;
  border-top:1px solid rgba(196,116,74,.4) !important;
  padding:20px 20px 4px !important; margin:22px 0 0 !important;
}
#pane-week .trim h2{
  font-family:Basteleur,serif !important; font-weight:300 !important;
  font-size:25px !important; line-height:1.12 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--nut-ink) !important;
  border:0 !important; box-shadow:none !important; padding:0 !important;
  margin:0 0 8px !important; max-width:24ch;
}
#nutTrimNote{
  font-family:Karrik,sans-serif; font-size:11.5px; line-height:1.5;
  color:#c4744a; margin:0 0 14px; max-width:46ch;
}
#pane-week .trow{
  display:block !important; background:none !important; border:0 !important;
  padding:11px 0 !important; margin:0 !important;
  box-shadow:inset 0 -1px 0 rgba(233,240,220,.075) !important;
}
#pane-week .trow .n{
  display:block !important; font-family:Basteleur,serif !important; font-weight:700 !important;
  font-size:17px !important; color:var(--nut-ink) !important; text-transform:none !important;
}
#pane-week .trow .v{
  display:block !important; margin-top:3px !important;
  font-family:Karrik,sans-serif !important; font-size:11px !important;
  color:var(--nut-dim) !important; text-transform:none !important;
}
#pane-week .trow button{
  min-height:40px !important; margin-top:8px !important; padding:0 15px !important;
  background:none !important; border:1px solid rgba(233,240,220,.2) !important;
  color:#c3d1b6 !important; border-radius:10px !important;
  font-family:Karrik,sans-serif !important; font-size:10px !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
}
#pane-week .trow.nut-unsure .n::after{
  content:"not answered"; margin-left:9px; vertical-align:middle;
  font-family:Karrik,sans-serif; font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#a9e34b;
  box-shadow:inset 0 0 0 1px rgba(169,227,75,.45); border-radius:99px; padding:3px 8px;
}

/* ── the status band: it should read as a warning, not a hazard sign ── */
#pane-week #statusBand,
#pane-week .status{
  background:none !important; color:var(--nut-ink) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:16px 20px 18px !important; margin:14px 0 0 !important;
}
#pane-week .status.behind{
  border-left:2px solid #c4744a !important; padding-left:18px !important;
  margin-left:20px !important; margin-right:20px !important;
}
#pane-week .status.clear, #pane-week .status.ok{
  border-left:2px solid var(--nut-lime) !important; padding-left:18px !important;
  margin-left:20px !important; margin-right:20px !important;
}
#pane-week .status *{ color:inherit !important; background:none !important }
#pane-week .status #statusWord, #pane-week .status .word{
  font-family:Basteleur,serif !important; font-weight:300 !important;
  font-size:25px !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--nut-ink) !important; display:block; margin-bottom:5px;
}
#pane-week .status.behind #statusWord{ color:#e08a5c !important }
#pane-week .status #statusWhy, #pane-week .status .why{
  font-family:Karrik,sans-serif !important; font-size:12.5px !important;
  line-height:1.55 !important; color:var(--nut-dim) !important;
  text-transform:none !important; letter-spacing:0 !important;
}
#pane-week .pacewrap, #pane-week .pacebar{
  background:rgba(233,240,220,.09) !important; border-radius:3px !important;
  overflow:hidden !important;
}
#pane-week #paceLabel{
  font-family:Karrik,sans-serif !important; font-size:11px !important;
  color:#9aab8d !important; text-transform:none !important; letter-spacing:0 !important;
}
/* .bar is a VERTICAL column in the "what each day is worth" chart, not a
   progress bar. Forcing it to 6px tall flattened the whole chart. Only the
   colour of the fill is ours to change, never its size. */
#pane-week .bd .bar{
  background:rgba(233,240,220,.07) !important; border-radius:3px !important;
  overflow:hidden !important;
}
#pane-week .bd .bar i{ background:#5f6f55 !important; border-radius:3px !important }
#pane-week .bd.best .bar i{ background:var(--nut-lime) !important }
#pane-week .bd.worst .bar i{ background:#c4744a !important }
#pane-week .bd .n{
  font-family:Karrik,sans-serif !important; font-size:9px !important;
  letter-spacing:.16em !important; text-transform:uppercase !important; color:#5f6f55 !important;
}
#pane-week .bd.best .n{ color:var(--nut-lime) !important }
#pane-week .bd .v{
  font-family:Karrik,sans-serif !important; font-size:12px !important;
  color:#8b9c80 !important; font-variant-numeric:tabular-nums !important;
}
#pane-week .bd.best .v{ color:var(--nut-lime) !important }
#nutPicker .np-try{
  width:100%; min-height:48px; margin-top:18px; border-radius:12px;
  background:var(--nut-lime); color:#132000; border:0;
  font-family:Karrik,sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
#nutPicker .np-auto{ margin-top:10px }


/* ══════════════════════════════════════════════════════════════
   PICK A SQUIRREL FOR A BILL
   A sheet up from the bottom. It is fixed and hidden until it is
   opened: without these rules it sits in the page as a 25,000px
   block and shoves everything else out of reach.
   ══════════════════════════════════════════════════════════════ */
#nutPicker{
  position:fixed; inset:0; z-index:140; display:none;
  background:rgba(4,7,3,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  align-items:flex-end;
}
#nutPicker.on{ display:flex }
#nutPicker .np-sheet{
  width:100%; max-height:82vh; overflow-y:auto; background:#0c1408;
  border-top:1px solid rgba(233,240,220,.14);
  border-radius:20px 20px 0 0;
  padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px));
  animation:npup .28s cubic-bezier(.2,1,.3,1);
}
@keyframes npup{ from{transform:translateY(28px);opacity:0} to{transform:none;opacity:1} }
#nutPicker .np-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
#nutPicker .np-title{
  font-family:Basteleur,serif; font-weight:300; font-size:25px; color:var(--nut-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#nutPicker .np-x{
  flex:0 0 auto; min-height:44px; padding:0 12px; background:none; border:0; color:#7a8a6c;
  font-family:Karrik,sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
}
#nutPicker .np-say{
  font-family:Karrik,sans-serif; font-size:12.5px; line-height:1.5; color:var(--nut-dim);
  margin:2px 0 14px; max-width:44ch;
}
#nutPicker .np-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:12px 10px;
}
#nutPicker .np-opt{ background:none; border:0; padding:0; display:block; text-align:center; cursor:pointer }
#nutPicker .np-opt img{
  width:100%; aspect-ratio:1/1; border-radius:14px; object-fit:cover; display:block;
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.1);
}
#nutPicker .np-opt span{
  display:block; margin-top:6px; font-family:Karrik,sans-serif; font-size:10px;
  line-height:1.3; color:#8b9c80; letter-spacing:.02em;
}
#nutPicker .np-opt.on img{ box-shadow:0 0 0 2px var(--nut-lime) }
#nutPicker .np-opt.on span{ color:var(--nut-lime) }

/* ══════════════════════════════════════════════════════════════
   ON A BIG SCREEN
   Above 1100px the app drops its tabs and becomes one 11,000px
   scroll, and the hero number measures itself to the viewport so
   it goes enormous. On a 43 inch screen that is unreadable.
   So on a desktop it is held to a phone shaped column: the tabs
   come back, the type is the size it will be in your hand, and
   what you see here is what you get on the phone.
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  html{ background:#050803 }
  body{
    max-width:470px; margin:0 auto;
    box-shadow:0 0 0 1px rgba(233,240,220,.07), 0 40px 120px rgba(0,0,0,.75);
    min-height:100vh;
  }
  body::before, body::after{ max-width:470px; left:50%; transform:translateX(-50%) }
  nav.tabs{ max-width:470px; margin:0 auto }
  #nutPicker .np-sheet{ max-width:470px; margin:0 auto; border-radius:20px }
  #nutPicker{ align-items:center }
  #nutDemoBar{ max-width:470px; margin:0 auto }
  #nutFlash{ max-width:470px; left:50%; transform:translateX(-50%) }
}
/* the app drops its tabs above 1100px and shows all five panes as one
   scroll. In a 470px column that is 12,000px of page. Put the tabs back. */
@media (min-width:900px){
  .pane{ display:none !important }
  .pane.on{ display:block !important }
  nav.tabs{ display:flex !important }
}

/* The hero measures itself to the viewport, and above 1100px it is allowed up
   to 132px. In a 470px column that overflows both edges. Hold it to something
   that fits the column it actually lives in. */
@media (min-width:900px){
  #toGo{ font-size:86px !important; letter-spacing:-.045em !important; line-height:.96 !important }
  /* The tab bar sticks to the top but the panes start at y=0 underneath it,
     so the date was printing through the tabs. Push every pane clear of it. */
  .pane{ padding-top:78px !important }
  #pane-week .headrow{ padding-top:0 !important }
  /* nothing should run past the edge of the column */
  #nutComing .nk-strip{ padding-right:20px !important }
}


/* ══════════════════════════════════════════════════════════════
   CARDS, NOT BANDS
   The screen was a stack of full width rectangles cut straight
   across the page, which is the shape that reads as generic.
   Same panels, but inset and rounded, so the hoard photo shows
   between them and they sit ON the ground rather than slicing it.

   The thing that keeps this from being every other dark app: the
   ground between the cards is a photograph, the cards are not all
   the same colour, and each colour still means what it meant.
   ══════════════════════════════════════════════════════════════ */
:root{ --nut-r:20px; --nut-inset:14px; }

/* The date sits on the bare ground. It lives inside a wrapper with its own
   padding, so it can never line up with a card below it, and two nearly
   aligned edges look worse than one deliberate difference. The card starts
   at the number. */
#pane-week .headrow{
  background:none !important;
  padding:18px 20px 6px !important;
  margin:0 !important;
}
#pane-week .tile.hi{
  background:rgba(10,16,8,.74) !important;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  margin:0 var(--nut-inset) 12px !important;
  border-radius:var(--nut-r) !important;
  padding:16px 18px 18px !important;
}

/* the pile gets its own card, so the photo inside it has an edge */
#nutPile{
  margin:0 var(--nut-inset) !important;
  border-radius:var(--nut-r) !important;
  overflow:hidden !important;
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.06) !important;
}
#nutComing{ margin-top:10px !important }

/* the money fields keep their colour meaning, and get the same radius */
#pane-week #todayIn, #pane-week #bankIn, #bankReal, textarea.f, input.f, select.f{
  border-radius:16px !important;
}
#pane-week .moneyrow{
  border-radius:16px !important; overflow:hidden !important;
  margin:0 !important;
}
#pane-week .tile.bills, #pane-week .tile.earn, #pane-week .tile.bank{
  margin:0 var(--nut-inset) 12px !important;
  border-radius:var(--nut-r) !important;
}

/* the yellow chip: rounded, and it keeps its hard job */
#pane-week .tile.hot{ margin:0 var(--nut-inset) 12px !important }
#pane-week .tile.hot .tl{ border-radius:14px 14px 0 0 !important }
#pane-week .tile.hot .tv{ border-radius:0 0 14px 14px !important }

/* the status block and the cut list become cards on the ground */
#pane-week .status.behind, #pane-week .status.clear, #pane-week .status.ok{
  background:rgba(10,16,8,.72) !important;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  margin:14px var(--nut-inset) !important;
  border-radius:var(--nut-r) !important;
  padding:18px !important;
  border-left:2px solid #c4744a !important;
}
#pane-week .status.clear, #pane-week .status.ok{ border-left-color:var(--nut-lime) !important }
#pane-week .trim{
  background:rgba(10,16,8,.72) !important;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  margin:14px var(--nut-inset) !important;
  border-radius:var(--nut-r) !important;
  border-top:0 !important; border-left:2px solid #c4744a !important;
  padding:18px 18px 6px !important;
}

/* the day strip: each day its own rounded key */
#pane-week #shoulder{ padding:0 var(--nut-inset) !important; gap:6px !important }
#pane-week #shoulder .mk{ border-radius:12px !important; overflow:hidden !important }

/* the bills list sits on a card too */
#pane-bills #billList, #pane-bills .btot, #pane-bills .grand{
  margin-left:var(--nut-inset) !important; margin-right:var(--nut-inset) !important;
}
#pane-bills #billList{
  background:rgba(10,16,8,.6) !important;
  border-radius:var(--nut-r) !important; overflow:hidden !important;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
#pane-bills .brow{ padding-left:14px !important; padding-right:12px !important }
#pane-bills .brow:last-child{ box-shadow:none !important }
#pane-month .calgrid{ padding:0 var(--nut-inset) !important }

/* on a big screen: the phone column, scaled up so it reads from where he sits */
@media (min-width:900px){
  body{ zoom:1.15 }
}

/* ── dividers: a hairline where a new idea starts, nothing more ── */
#pane-week .tile.bills::before,
#pane-week .status::before,
#pane-week .trim::before{ content:none }
#pane-bills .brow + .brow,
#pane-month .cd,
#nutRail .nutcard{ }
/* between the money fields and what they explain */
#pane-week .sign, #pane-week .tn, #pane-week .nut-hint{
  position:relative;
}
#pane-week .nut-hint::after{
  content:""; display:block; height:1px; margin:12px 0 0;
  background:linear-gradient(90deg,rgba(233,240,220,.14),rgba(233,240,220,.02));
}
/* under each labelled section on the quieter tabs */
#pane-setup .field + .field{ padding-top:14px; }
#pane-setup .field + .field::before{
  content:""; display:block; height:1px; margin:0 0 14px;
  background:linear-gradient(90deg,rgba(233,240,220,.1),rgba(233,240,220,.01));
}
#pane-goals .field + .field{ padding-top:14px }
#pane-goals .field + .field::before{
  content:""; display:block; height:1px; margin:0 0 14px;
  background:linear-gradient(90deg,rgba(233,240,220,.1),rgba(233,240,220,.01));
}

/* ── the day strip: seven cells across a phone, so every pixel counts ──
   The card was 67px wide with only 39px usable inside it, which wrapped
   "AUG 13" onto two lines and clipped a three figure number. Padding was
   eating the cell. */
#pane-week #shoulder .mk{
  padding-left:3px !important; padding-right:3px !important;
  min-width:0 !important;
}
#pane-week #shoulder .mk .d,
#pane-week #shoulder .mk .n,
#pane-week #shoulder .mk .bill{
  white-space:nowrap !important;
  letter-spacing:.04em !important;
  padding-left:3px !important; padding-right:2px !important;
}
#pane-week #shoulder .mk .d{ font-size:9.5px !important }
#pane-week #shoulder .mk .n{ font-size:8.5px !important; line-height:1.15 !important }
#pane-week #shoulder .mk .bill{ font-size:8px !important }
#pane-week #shoulder .mk input{
  padding-left:2px !important; padding-right:2px !important;
  font-size:15px !important; letter-spacing:-.03em !important;
  text-align:center !important; min-width:0 !important;
}

/* ── bill rows on a small phone ──
   The amount column was auto width, so every row was a different shape and a
   long name ran under its own figure. Fixed columns line the money up and give
   the name a known amount of room to wrap into. */
#pane-bills .brow{
  grid-template-columns:46px minmax(0,1fr) 94px 34px !important;
  gap:0 9px !important;
}
#pane-bills .brow .nutface{ width:46px !important; height:46px !important }
#pane-bills .brow .amt{
  width:94px !important; min-width:0 !important; font-size:16px !important;
}
#pane-bills .brow .nm{
  font-size:16px !important;
  overflow-wrap:anywhere !important; word-break:normal !important;
  hyphens:auto;
}
#pane-bills .brow .kill{ width:34px !important }
@media (max-width:380px){
  #pane-bills .brow{ grid-template-columns:42px minmax(0,1fr) 88px 30px !important }
  #pane-bills .brow .amt{ width:88px !important; font-size:15px !important }
  #pane-bills .brow .nutface{ width:42px !important; height:42px !important }
}


/* ══════════════════════════════════════════════════════════════
   THE WEEK SCREEN, REBUILT
   The pile sat 215px above the money box, so by the time you had
   scrolled down to type, the thing that reacts to your typing was
   off the screen. You could not see what your own entry did.

   So: the pile is big and sits DIRECTLY above the two money boxes,
   which now sit beside each other instead of stacked. The three
   stat tiles condense into one row of three. Everything that is a
   reference number gets smaller, and everything you act on gets
   bigger.
   ══════════════════════════════════════════════════════════════ */
#pane-week .tiles{
  display:grid !important;
  grid-template-columns:repeat(6,1fr) !important;
  gap:10px var(--nut-inset) !important;
  padding:0 var(--nut-inset) !important;
  align-items:start !important;
}
#pane-week .tiles > *{ margin-left:0 !important; margin-right:0 !important }

/* what you act on, in reach of each other */
#pane-week .tile.hot { grid-column:span 6 !important; order:1 !important; margin:0 !important }
#pane-week #nutAnti  { grid-column:span 6 !important; order:2 !important; margin:0 !important }
#pane-week #nutPile  { grid-column:span 6 !important; order:3 !important; margin:0 !important;
                       height:210px !important }
#pane-week .tile.earn{ grid-column:span 3 !important; order:4 !important; margin:0 !important }
#pane-week .tile.bank{ grid-column:span 3 !important; order:5 !important; margin:0 !important }
#pane-week #nutComing{ grid-column:span 6 !important; order:6 !important; margin:0 !important }

/* the reference numbers: three across, small */
#pane-week .tile.bills{ grid-column:span 2 !important; order:7 !important; margin:0 !important }
#pane-week .tile.hi   { grid-column:span 2 !important; order:8 !important; margin:0 !important }
#pane-week .tile.per  { grid-column:span 2 !important; order:9 !important; margin:0 !important }

/* those three shrink to fit a third of the width each */
#pane-week .tile.bills, #pane-week .tile.hi, #pane-week .tile.per{
  background:rgba(10,16,8,.6) !important;
  border-radius:14px !important;
  padding:11px 10px !important;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
#pane-week .tile.bills .tl, #pane-week .tile.hi .tl, #pane-week .tile.per .tl,
#pane-week .tile.bills .l, #pane-week .tile.hi .l, #pane-week .tile.per .l{
  font-size:8px !important; letter-spacing:.13em !important; line-height:1.25 !important;
  display:block !important; background:none !important; padding:0 !important;
  color:#5f6f55 !important;
}
#pane-week .tile.bills .big, #pane-week .tile.hi .big, #pane-week .tile.per .big,
#pane-week .tile.bills b, #pane-week .tile.hi b, #pane-week .tile.per b{
  font-size:19px !important; letter-spacing:-.03em !important; line-height:1.1 !important;
  display:block !important; margin-top:4px !important; background:none !important; padding:0 !important;
}
#pane-week .tile.hi .big{ color:var(--nut-ink) !important; text-shadow:none !important }
/* the notes under those three go away, they are reference not instruction */
#pane-week .tile.bills .tn, #pane-week .tile.hi .tn, #pane-week .tile.per .tn,
#pane-week .tile.bills small, #pane-week .tile.per small{ display:none !important }

/* the two money boxes, side by side */
#pane-week .tile.earn, #pane-week .tile.bank{
  background:rgba(10,16,8,.6) !important;
  border-radius:16px !important; padding:12px !important;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
#pane-week .tile.earn .tl, #pane-week .tile.bank .tl{
  font-size:8.5px !important; letter-spacing:.15em !important; display:block !important;
  margin-bottom:7px !important; color:#7a8a6c !important;
}
#pane-week #todayIn, #pane-week #bankIn, #bankReal{
  min-height:44px !important; font-size:16px !important; padding:10px 11px !important;
}
#pane-week .moneyrow .cur{ font-size:13px !important }
/* the long explanations under the money boxes get out of the way */
#pane-week .tile.earn .tn, #pane-week .tile.bank .tn{
  font-size:10px !important; line-height:1.35 !important; margin-top:6px !important;
}
#pane-week .nut-hint{ font-size:10.5px !important; margin:8px 2px 0 !important }

/* the pile is the point, so it gets the room */
#pane-week #nutPile svg{ height:100% !important }

/* ── the important text gets the colour, the rest gets out of the way ── */
/* the date line: this is where you are, it should read first */
#pane-week .dow{ color:#f4f8ee !important }
#pane-week .dmy{ color:var(--nut-yel) !important; opacity:1 !important }
#pane-week .wkrange{ color:#9fb08f !important }
/* the label over the big number: the most important sentence on the screen */
#pane-week #heroLabel, #pane-week .herolabel{
  color:var(--nut-lime) !important; font-size:10px !important;
  letter-spacing:.2em !important; text-transform:uppercase !important;
  margin-bottom:2px !important;
}
/* the number itself comes down a size, it was shouting */
#pane-week #toGo{ font-size:52px !important; line-height:.95 !important }
#pane-week #toGoWrap{ padding-top:0 !important }
/* the sentence under it, condensed */
#pane-week #subLine, #pane-week .subline{
  font-size:12px !important; line-height:1.5 !important; color:#94a687 !important;
}
#pane-week #subLine b, #pane-week .subline b{ color:var(--nut-ink) !important; font-weight:400 !important }
/* the fine print below the tiles is reference, not instruction */
#pane-week .fineprint{ font-size:10px !important; line-height:1.45 !important; opacity:.72 }

/* ── the three reference tiles: the number is b.tv, not .big ──
   Targeting .big and b was not enough, an earlier rule kept .hi at 56px and
   a $5,507 in a 112px box ran straight over its neighbours. */
#pane-week .tile.bills .tv,
#pane-week .tile.hi .tv,
#pane-week .tile.per .tv{
  font-size:18px !important; line-height:1.15 !important;
  letter-spacing:-.03em !important;
  display:block !important; width:auto !important; max-width:100% !important;
  background:none !important; padding:0 !important; margin:5px 0 0 !important;
  color:var(--nut-ink) !important; text-shadow:none !important;
  overflow-wrap:anywhere !important;
}
#pane-week .tile.hi .tv{ color:var(--nut-lime) !important }
#pane-week .tile.bills .tv{ color:#e08a5c !important }
#pane-week .tile.bills .tl,
#pane-week .tile.hi .tl,
#pane-week .tile.per .tl{
  white-space:normal !important; overflow:visible !important;
  width:auto !important; max-width:100% !important;
  background:none !important; padding:0 !important; margin:0 !important;
}
/* they are stat cards, so give them a common height and let them breathe */
#pane-week .tile.bills, #pane-week .tile.hi, #pane-week .tile.per{
  min-height:86px !important; display:flex !important; flex-direction:column !important;
  justify-content:flex-start !important;
}

/* ── the raid: one crow drops in, lifts an acorn, carries it off ── */
#nutRaid{
  position:absolute; inset:0; pointer-events:none; z-index:8;
  opacity:0; overflow:visible;
}
#nutRaid.go{ opacity:1 }
#nutRaid .rd-bird{
  position:absolute; right:-70px; top:-10px; width:52px; height:auto;
  color:#070b09; overflow:visible;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
#nutRaid .rd-nut{
  position:absolute; right:-56px; top:14px; width:19px; height:auto;
  color:#9ada44; opacity:0;
}
#nutRaid.go .rd-bird{ animation:raidfly 1.9s cubic-bezier(.35,.02,.3,1) forwards }
#nutRaid.go .rd-nut { animation:raidnut 1.9s cubic-bezier(.35,.02,.3,1) forwards }
#nutRaid.go .rd-bird g{ animation:crowflap .21s ease-in-out infinite alternate;
                        transform-origin:50% 60% }
/* in from the top right, down to the pile, then away to the top left */
@keyframes raidfly{
  0%   { transform:translate(0,0) scale(.72) rotate(8deg); opacity:0 }
  12%  { opacity:1 }
  42%  { transform:translate(-210px,120px) scale(1) rotate(0deg) }
  52%  { transform:translate(-244px,150px) scale(1.02) rotate(-4deg) }
  100% { transform:translate(-520px,-40px) scale(.7) rotate(-14deg); opacity:0 }
}
/* the acorn only appears once it has been lifted */
@keyframes raidnut{
  0%,49%  { opacity:0; transform:translate(-244px,178px) scale(.9) }
  55%     { opacity:1; transform:translate(-250px,168px) scale(1) }
  100%    { opacity:0; transform:translate(-516px,-16px) scale(.7) rotate(-20deg) }
}
@media (prefers-reduced-motion:reduce){
  #nutRaid.go .rd-bird, #nutRaid.go .rd-nut{ animation-duration:.01s }
}

/* ── the calendar chip: a face and a figure, not a squeezed word ── */
#pane-month .cd .chip{
  display:grid !important;
  grid-template-columns:18px 1fr !important;
  align-items:center !important; gap:4px !important;
  border-left:0 !important;
  padding:2px 0 3px 0 !important;
  margin-bottom:4px !important;
}
#pane-month .cd .chip .calface{
  width:18px !important; height:18px !important; border-radius:50% !important;
  object-fit:cover !important; display:block !important;
  box-shadow:0 0 0 1px rgba(233,240,220,.16) !important;
}
#pane-month .cd .chip .calface.none{
  background:radial-gradient(circle at 38% 34%,#3a2a18,#171008) !important;
}
/* the name is what does not fit, so it goes. The picture says which bill. */
#pane-month .cd .chip span:not(.calface){ display:none !important }
#pane-month .cd .chip b{
  grid-column:2 !important;
  font-size:10px !important; line-height:1.1 !important;
  color:#e8d7c6 !important; font-weight:400 !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  padding-right:0 !important;
}
#pane-month .cd .chip .tick{
  position:static !important; grid-column:2 !important; justify-self:end !important;
  margin-top:-2px !important;
}
#pane-month .cd .chip.paid .calface{ filter:grayscale(1) brightness(.6) }

/* where there IS room, the name comes back */
@media (min-width:560px){
  #pane-month .cd .chip{ grid-template-columns:18px 1fr !important }
  #pane-month .cd .chip span:not(.calface){
    display:block !important; grid-column:2 !important;
    font-size:8.5px !important; color:#cf9070 !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  #pane-month .cd .chip b{ grid-column:2 !important }
}
/* face, amount, tick: three columns, so the tick stops sitting on the figure */
#pane-month .cd .chip{
  grid-template-columns:17px 1fr 15px !important;
  gap:3px !important;
}
#pane-month .cd .chip b{ grid-column:2 !important; font-size:9.5px !important }
#pane-month .cd .chip .tick{
  grid-column:3 !important; justify-self:end !important; align-self:center !important;
  width:15px !important; height:15px !important; margin:0 !important;
}
#pane-month .cd .chip .tick::before{ right:1px !important; top:1px !important;
  width:11px !important; height:11px !important }
#pane-month .cd .chip .calface{ width:17px !important; height:17px !important }
@media (min-width:560px){
  #pane-month .cd .chip{ grid-template-columns:17px 1fr 15px !important }
  #pane-month .cd .chip span:not(.calface){ grid-column:2 !important }
}


/* ── the calendar chip, final ──────────────────────────────────────────
   A day cell is 47px wide. A face, a figure and a tick will not sit on one
   line inside that, whatever you do to the sizes: 17 + 15 + gaps leaves
   nine pixels for the number. So it takes two lines instead.

     row 1   the squirrel, and the paid tick on the right
     row 2   the amount, across the full width

   The name is gone on a phone on purpose. The picture identifies the bill
   at a size where a truncated word cannot. */
#pane-month .cd .chip{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-rows:auto auto !important;
  gap:1px 2px !important;
  padding:3px 0 5px !important;
  margin-bottom:5px !important;
  border-left:0 !important;
  box-shadow:inset 0 -1px 0 rgba(233,240,220,.06) !important;
}
#pane-month .cd .chip .calface{
  grid-column:1 !important; grid-row:1 !important;
  width:19px !important; height:19px !important;
}
#pane-month .cd .chip .tick{
  grid-column:2 !important; grid-row:1 !important;
  position:static !important; justify-self:end !important; align-self:center !important;
  width:16px !important; height:16px !important; margin:0 !important;
}
#pane-month .cd .chip .tick::before{
  right:2px !important; top:2px !important; width:11px !important; height:11px !important;
}
#pane-month .cd .chip b{
  grid-column:1 / 3 !important; grid-row:2 !important;
  font-size:10.5px !important; line-height:1.1 !important;
  color:#e8d7c6 !important; font-weight:400 !important;
  font-variant-numeric:tabular-nums lining-nums !important;
  white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important;
  letter-spacing:-.02em !important;
}
#pane-month .cd .chip span:not(.calface){ display:none !important }

/* on anything wider than a phone the name comes back, on its own line */
@media (min-width:560px){
  #pane-month .cd .chip span:not(.calface){
    display:block !important; grid-column:1 / 3 !important; grid-row:3 !important;
    font-size:8.5px !important; color:#cf9070 !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
}
/* The tick shrank to 16px when the chip went to two rows, which is under the
   thumb minimum. A 47px cell fits a 17px face plus a 26px tick exactly, and
   the tick keeps its small visible box while the tappable area is full size. */
#pane-month .cd .chip .calface{ width:17px !important; height:17px !important }
#pane-month .cd .chip .tick{
  width:26px !important; height:26px !important;
  margin:-4px -4px -4px 0 !important;
}
#pane-month .cd .chip .tick::before{
  right:7px !important; top:7px !important; width:12px !important; height:12px !important;
}

/* LAYOUT C ================================================================
   The top card, the rest of the month, and the flashcard. All three sit in
   the week pane around the pile, which does not move. */

/* the bill due first */
/* the week pane is a grid, so anything dropped in claims the whole row
   or it gets squeezed into one column, which is how this arrived 55px wide */
#nutTop{position:relative;height:176px;border-radius:18px;overflow:hidden;
  margin:2px var(--pad,14px) 8px}
#nutTop .nt-face{position:absolute;inset:0;background-size:cover;background-position:50% 42%}
#nutTop .nt-face.none{background:radial-gradient(circle at 38% 34%,#23301c,#10180d)}
#nutTop .nt-ov{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,6,.1) 0%,rgba(8,14,6,0) 28%,rgba(8,14,6,.95) 100%)}
#nutTop .nt-flag{position:absolute;left:13px;top:12px;background:rgba(8,14,6,.74);
  border-radius:99px;padding:5px 11px;font-size:8px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--nut-yel)}
#nutTop .nt-tx{position:absolute;left:15px;right:15px;bottom:12px}
#nutTop .nt-nm{font-family:Basteleur,serif;font-weight:700;font-size:25px;line-height:1.05;display:block}
#nutTop .nt-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:5px}
#nutTop .nt-when{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#e6a985}
#nutTop .nt-amt{font-size:26px;letter-spacing:-.04em;color:var(--nut-yel);
  font-variant-numeric:tabular-nums lining-nums}

/* the rest of the month, as faces */
#nutRest{margin:2px var(--pad,14px) 16px}
#nutRest.empty{display:none}
#nutRest .nr-lbl{display:block;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#6b7c60;margin:0 2px 7px}
#nutRest .nr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
#nutRest .nr-cell{margin:0;text-align:center}
#nutRest .nr-face{display:block;width:100%;aspect-ratio:1/1;border-radius:10px;
  background:#0d150a center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.08)}
#nutRest .nr-amt{display:block;font-size:10px;color:#c9b06a;margin-top:3px;
  font-variant-numeric:tabular-nums lining-nums}
#nutRest .nr-day{display:block;font-size:7px;letter-spacing:.12em;color:#6b7c60;margin-top:1px}
#nutRest .nr-cell.paid .nr-face{filter:grayscale(1) brightness(.6)}
#nutRest .nr-cell.paid .nr-amt{color:#5f7a4a;text-decoration:line-through}

/* the flashcard */
#nutAsk{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  padding:26px;background:rgba(4,8,3,.82)}
#nutAsk.on{display:flex}
#nutAsk .na-card{width:100%;max-width:360px;background:#0e1a0a;border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(169,227,75,.28),0 26px 60px rgba(0,0,0,.6)}
#nutAsk .na-face{height:168px;background:#0d150a center/cover no-repeat}
#nutAsk .na-face.none{background:radial-gradient(circle at 38% 34%,#23301c,#10180d)}
#nutAsk .na-in{padding:17px 18px 18px}
#nutAsk .na-ask{font-family:Basteleur,serif;font-weight:300;font-size:21px;line-height:1.15;margin:0 0 3px}
#nutAsk .na-nm{font-family:Basteleur,serif;font-weight:700;font-size:25px;line-height:1.1;margin:0}
#nutAsk .na-amt{display:block;font-size:29px;color:var(--nut-yel);letter-spacing:-.04em;margin-top:7px;
  font-variant-numeric:tabular-nums lining-nums}
#nutAsk .na-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
#nutAsk .na-btns button{border:0;border-radius:13px;padding:15px 8px;font-family:Karrik,sans-serif;
  font-size:14px;cursor:pointer}
#nutAsk .na-yes{background:var(--nut-lime);color:#0c1706}
#nutAsk .na-no{background:rgba(233,240,220,.09);color:#cfe0c2}
#nutAsk .na-tiny{margin:11px 2px 0;font-size:10px;color:var(--nut-dim);text-align:center}


/* GLOSS =================================================================
   The button style he approved on 2026-08-14. Every stop is computed from
   the token above, not picked: the token is the middle, the top is it
   lightened 42 per cent and the foot is it darkened 42. The sheen sits on
   the top half and is CUT DEAD at 47 per cent, which is the part that makes
   it read as light on a curved surface instead of a gradient. The acorn
   photograph is blended in underneath at soft light, so the surface has
   grain without turning into a picture.
   He asked twice for the white to come down: at 90 per cent it read as
   paint, at 46 it reads as light. Do not raise it. */

button.go{
  background:
    linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.13) 46%,
                    rgba(255,255,255,0) 47%, rgba(255,255,255,0) 100%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #cdef97 0%, #a9e34b 48%, #62842c 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  color:#0d1206 !important;
  border:0 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -2px 0 rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.5),
    0 0 22px rgba(169,227,75,.28) !important;
}
button.go:active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 46%,
                    rgba(255,255,255,0) 47%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #cdef97 0%, #a9e34b 52%, #62842c 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3) !important;
}
#nutAsk .na-yes{
  background:
    linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.13) 46%,
                    rgba(255,255,255,0) 47%, rgba(255,255,255,0) 100%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #cdef97 0%, #a9e34b 48%, #62842c 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  color:#0d1206 !important;
  border:0 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -2px 0 rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.5),
    0 0 22px rgba(169,227,75,.28) !important;
}
#nutAsk .na-yes:active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 46%,
                    rgba(255,255,255,0) 47%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #cdef97 0%, #a9e34b 52%, #62842c 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3) !important;
}
.bankit{
  background:
    linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.13) 46%,
                    rgba(255,255,255,0) 47%, rgba(255,255,255,0) 100%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #71a08e 0%, #0a5c3d 48%, #063523 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  color:#f4faec !important;
  border:0 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -2px 0 rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.5),
    0 0 22px rgba(10,92,61,.28) !important;
}
.bankit:active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 46%,
                    rgba(255,255,255,0) 47%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #71a08e 0%, #0a5c3d 52%, #063523 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3) !important;
}
#nutAsk .na-no{
  background:
    linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.13) 46%,
                    rgba(255,255,255,0) 47%, rgba(255,255,255,0) 100%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #70736f 0%, #080e06 48%, #050803 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  color:#f4faec !important;
  border:0 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -2px 0 rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.5),
    0 0 22px rgba(8,14,6,.28) !important;
}
#nutAsk .na-no:active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 46%,
                    rgba(255,255,255,0) 47%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #70736f 0%, #080e06 52%, #050803 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3) !important;
}

.alert{
  background:
    linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.13) 46%,
                    rgba(255,255,255,0) 47%, rgba(255,255,255,0) 100%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #bb8976 0%, #8a3312 48%, #501e0a 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  color:#f4faec !important;
  border:0 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -2px 0 rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.5),
    0 0 22px rgba(138,51,18,.28) !important;
}
.alert:active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 46%,
                    rgba(255,255,255,0) 47%),
    url("grain.png") center/64px auto,
    linear-gradient(180deg, #bb8976 0%, #8a3312 52%, #501e0a 100%) !important;
  background-blend-mode: normal, soft-light, normal !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3) !important;
}

/* the shapes stay as they were, only the surface changed */
button.go{border-radius:14px !important}
button.ghost{border-radius:12px !important}
#nutAsk .na-yes,#nutAsk .na-no{border-radius:13px !important}
.bankit{border-radius:11px !important}

/* Quiet buttons stay quiet. Gloss is reserved for the actions that actually
   do something, or Setup becomes a wall of black slabs that outshouts the one
   button on the screen that matters. */
button.ghost{
  background:rgba(233,240,220,.045) !important;
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.17) !important;
  color:#9aab8d !important; text-shadow:none !important;
}
button.ghost:hover{
  background:rgba(233,240,220,.085) !important;
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.34) !important;
  color:var(--nut-ink) !important;
}
button.ghost:active{
  background:rgba(0,0,0,.28) !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(233,240,220,.2) !important;
}
/* clearing everything is not the same kind of thing as backing it up */
#wipeBtn, .billbar button.wipe{
  background:rgba(212,100,58,.09) !important;
  box-shadow:inset 0 0 0 1px rgba(212,100,58,.42) !important;
}
/* three buttons in one fixed row ran off the left edge and clipped */
.rowbtns{flex-wrap:wrap !important}
.rowbtns button{flex:1 1 auto !important;min-width:0 !important}

/* three answers now, so the row wraps: the two real choices side by side and
   leave it until tomorrow underneath, quieter than both. */
#nutAsk .na-btns{display:grid !important;grid-template-columns:1fr 1fr !important;
  gap:9px !important}
#nutAsk .na-later{grid-column:1 / -1 !important;background:none !important;
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.16) !important;color:#9aab8d !important;
  border:0 !important;border-radius:13px !important;min-height:44px !important;padding:12px 8px !important;
  font-family:Karrik,sans-serif !important;font-size:12px !important;cursor:pointer}
#nutAsk .na-later:active{background:rgba(0,0,0,.3) !important}

/* WHAT ACTUALLY HAPPENED
   Tap a bill in the rest of the month. Same card language as the flashcard,
   so it is obviously the same kind of thing. */
#nutRest .nr-cell{cursor:pointer}
#nutRest .nr-cell:focus-visible{outline:2px solid var(--nut-lime);outline-offset:3px}
#nutRest .nr-cell.early .nr-face{box-shadow:inset 0 0 0 2px #e8c05a}
#nutRest .nr-cell.early .nr-day{color:#e8c05a}

#nutWhen{position:fixed;inset:0;z-index:62;display:none;align-items:center;
  justify-content:center;padding:26px;background:rgba(4,8,3,.82)}
#nutWhen.on{display:flex}
#nutWhen .nw-card{width:100%;max-width:330px;background:#0e1a0a;border-radius:20px;
  padding:18px;box-shadow:0 0 0 1px rgba(169,227,75,.24), 0 26px 60px rgba(0,0,0,.6)}
#nutWhen .nw-face{display:block;width:76px;height:76px;border-radius:14px;margin:0 auto 12px;
  background:#0d150a center/cover no-repeat}
#nutWhen .nw-nm{font-family:Basteleur,serif;font-weight:700;font-size:23px;margin:0;text-align:center}
#nutWhen .nw-amt{display:block;text-align:center;font-size:26px;color:#ffcd00;margin-top:3px}
#nutWhen .nw-due{margin:8px 0 14px;text-align:center;font-size:12px;color:#8b9c80}
#nutWhen .nw-lab{display:block;margin:14px 0 6px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#8b9c80}
#nutWhen .nw-date{width:100%;min-height:46px;background:rgba(233,240,220,.06);border:0;
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.16);border-radius:12px;color:var(--nut-ink);
  font-family:Karrik,sans-serif;font-size:15px;padding:0 12px}
#nutWhen .nw-paid{width:100%;min-height:48px;border:0;border-radius:13px;cursor:pointer;
  font-family:Karrik,sans-serif;font-size:14px;color:#0c1706;background:var(--nut-lime)}
#nutWhen .nw-clear,#nutWhen .nw-x{width:100%;min-height:44px;margin-top:9px;border:0;
  border-radius:12px;cursor:pointer;background:none;color:#9aab8d;
  box-shadow:inset 0 0 0 1px rgba(233,240,220,.16);font-family:Karrik,sans-serif;font-size:12px}
#nutWhen .nw-x{color:#7d8f70;box-shadow:none}

/* GOALS ================================================================
   The last screen still wearing the old look. The flat green panel is gone;
   goals sit on the same ground as everything else and read like the bill
   rows, because they are the same kind of thing: money with a name on it. */
#pane-goals .sign.right{background:none !important;box-shadow:none !important;
  border:0 !important;padding:0 !important;border-radius:0 !important}
#pane-goals .sign.right h2{font-family:Basteleur,serif !important;font-weight:700 !important;
  font-size:26px !important;line-height:1.06 !important;color:var(--nut-ink) !important;
  margin:0 var(--pad,14px) 12px !important;text-transform:none !important;
  letter-spacing:0 !important}
#goalList{display:flex !important;flex-direction:column !important;gap:9px !important;
  margin:0 var(--pad,14px) !important;background:none !important;padding:0 !important}

#goalList .gcard{display:grid !important;
  grid-template-columns:52px 1fr auto !important;
  grid-template-areas:'face name state' 'face sub sub' 'bar bar bar' !important;
  align-items:center !important;gap:3px 11px !important;
  background:rgba(10,20,12,.72) !important;border:0 !important;border-radius:15px !important;
  padding:11px 12px !important;box-shadow:inset 0 0 0 1px rgba(233,240,220,.09) !important}
#goalList .gface{grid-area:face;width:52px;height:52px;border-radius:50%;display:block;
  background:#0d150a center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(233,240,220,.13), 0 5px 14px rgba(0,0,0,.5)}
#goalList .gface.none{background:radial-gradient(circle at 38% 34%, #23301c, #10180d)}
#goalList .gn{grid-area:name;font-family:Basteleur,serif !important;font-weight:700 !important;
  font-size:17px !important;line-height:1.1 !important;color:var(--nut-ink) !important;
  text-transform:none !important;letter-spacing:0 !important}
#goalList .gm{grid-area:state;justify-self:end;font-size:9px !important;letter-spacing:.14em;
  text-transform:uppercase;color:#8b9c80 !important;background:rgba(233,240,220,.07);
  border-radius:99px;padding:4px 9px}
#goalList .gcard.paused .gm{color:#c9a24a !important;background:rgba(201,162,74,.12)}
#goalList .gs{grid-area:sub;font-size:11px !important;line-height:1.4 !important;
  color:#8b9c80 !important;letter-spacing:0 !important;text-transform:none !important}

/* a bar you can actually see, with the empty part still readable */
#goalList .gbar{grid-area:bar;display:block !important;height:7px !important;margin-top:9px !important;
  background:rgba(233,240,220,.10) !important;border-radius:99px !important;overflow:hidden !important}
#goalList .gbar i{display:block !important;height:100% !important;border-radius:99px !important;
  background:linear-gradient(90deg,#7ab52e,#a9e34b) !important;min-width:0 !important;
  box-shadow:0 0 10px rgba(169,227,75,.45) !important}
#goalList .gcard.paused .gbar i{background:rgba(201,162,74,.55) !important;box-shadow:none !important}
#goalTot{margin:11px var(--pad,14px) 0 !important;font-size:12px !important;color:#8b9c80 !important}