/* ══════════════════════════════════════════════════════════════
THE NUT v2, skin only. No maths is touched by this file.
Every number on screen still comes from the original engine.
══════════════════════════════════════════════════════════════ */
/* TWO display faces on purpose. Basteleur carries the character of the app
everywhere except the week screen, which is where money is read and acted
on, and there General Sans gets out of the way of the figure. */
@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:Basteleur;src:url("fonts/gensans700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Basteleur;src:url("fonts/gensans500.woff2") format("woff2");font-weight:500;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 General Sans */
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}
/* A hand typed bank goes stale. Solid acorns on a week old number is the app
lying with confidence, so a stale pile fades to say "this is what you had
when you last looked". */
/* Small money has to land somewhere. In an empty box it sits in the middle and
is the only thing there; once there are acorns it drops to the corner and
gets out of the way. */
#nutPile .nxt{position:absolute;right:12px;bottom:8px;font-size:9px;letter-spacing:.16em;
text-transform:uppercase;color:rgba(255,255,255,.62);pointer-events:none;z-index:2;
/* a full pile reaches the corner, so the line needs its own ground to sit on */
background:rgba(6,10,7,.72);padding:4px 8px;border-radius:999px;
backdrop-filter:blur(2px)}
#nutPile.empty .nxt{left:0;right:0;bottom:auto;top:50%;transform:translateY(-50%);
text-align:center;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5)}
/* A stale bank used to fade the whole pile to 42%. That reads as broken
glass, not as "this number is old", and the label already says NOT
CHECKED TODAY in words. A touch of desaturation and nothing more:
never make real acorns look see-through. */
#nutPile.stale svg{filter:saturate(.8)}
#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 General Sans, 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. Display face 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,") !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, and Month keeps Basteleur. */
#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 i{--cw:34px;width:var(--cw);height:auto}
/* Eight frames of a real flight, stepped through. The sheet is 8 cells wide,
so making the background 8x the bird's own width lines every cell up exactly
whatever size that bird is, and the keyframe walks it by the same amount.
Percentages cannot do this: percentage background-position is measured
against the leftover space, not the frame, and lands between cells. */
#nutCrows i, .rd-bird{
display:block;position:absolute;
filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
aspect-ratio:64/46;
background-image:url(crow/flap-sheet.webp);
background-repeat:no-repeat;
background-size:calc(var(--cw) * 8) 100%;
background-position:0 0;
animation:crowfly 9s linear infinite, crowbeat .62s steps(8) infinite;
}
@keyframes crowbeat{ from{background-position-x:0} to{background-position-x:calc(var(--cw) * -8)} }
@media (prefers-reduced-motion:reduce){
#nutCrows i, .rd-bird{animation:none}
}
}
#nutCrows .cw0{--cw:34px;top:4%;animation-delay:0s,-.1s}
#nutCrows .cw1{--cw:26px;top:20%;animation-delay:-2.1s,-.28s}
#nutCrows .cw2{--cw:41px;top:38%;animation-delay:-4.4s,-.44s}
#nutCrows .cw3{--cw:22px;top:11%;animation-delay:-6.2s,-.06s}
#nutCrows .cw4{--cw:31px;top:29%;animation-delay:-7.5s,-.35s}
@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;
}
/* ── crows: spread across the sky, each on its own drift ── */
#nutCrows.on svg{animation:crowfly 11s linear infinite}
#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 */
/* 6px of gap between seven columns is 36 pixels spent on nothing, on a screen
that is 390 wide. Measured: the figures needed 49 and had 41. Three of those
eight came back from here, the rest from the box padding and the type size.
A calendar wants to be tight anyway. */
#pane-week #shoulder{ padding:0 6px !important; gap:3px !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:1px !important; padding-right:1px !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:.01em !important;
padding-left:1px !important; padding-right:1px !important;
text-align:center !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 }
/* ⛔ SEVEN COLUMNS ON A PHONE IS 46 PIXELS A DAY. MEASURE BEFORE YOU SET A SIZE.
Every figure in his screenshot was cut off mid number: "123.1" for 123.10,
"432.2" for 432.25, "$1,234 DU" for $1,234 due. Not one of them was wrong,
they were all too wide, and a number missing its last digit is worse than no
number because it still looks like a number.
390 wide, less the inset, less six gaps, is about 46 pixels a column, and
about 42 once the box has its padding. Six characters have to live in 42
pixels, so 15px was never going to hold "308.50" and no amount of tightening
the letters was going to save it.
13px does, with the spacing pulled in. And the word "due" came off the bill
line for the same reason: "$1,234 due" is ten characters where there is room
for six. The figure is what matters, it is orange, it sits under a date, and
the fold it lives in is called Day by day. It does not need the word. */
#pane-week #shoulder .mk input{
padding-left:1px !important; padding-right:1px !important;
font-size:12px !important; letter-spacing:-.05em !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 }
/* The height is a variable so the box can be the size of the heap in it. It
was a flat 210px !important, which beat the inline style JS was setting and
left six acorns rattling around in the same frame as ninety. */
#pane-week #nutPile { grid-column:span 6 !important; order:3 !important; margin:0 !important;
height:var(--pileh,210px) !important;
transition:height .28s cubic-bezier(.3,0,.2,1) }
@media (prefers-reduced-motion:reduce){ #pane-week #nutPile{transition:none} }
#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{
/* He asked for this a slight bit bigger. Changing it in tpl.html did nothing,
because THIS rule carries !important and wins, which is exactly the kind of
edit that looks done and changes nothing on the screen. */
color:var(--nut-lime) !important; font-size:13px !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}
/* A card you can answer has to look like one. It was display only, so nobody
would ever have tried tapping the most urgent thing on the screen. */
#nutTop{cursor:pointer}
#nutTop::after{
content:'Tap to answer';
position:absolute;right:10px;top:10px;
font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.72);background:rgba(0,0,0,.42);
padding:5px 9px;border-radius:20px;pointer-events:none;
}
#nutTop:active{transform:scale(.995)}
.wallbox{cursor:pointer}
/* ── the week screen reads in General Sans ─────────────────────────────────
Everywhere else keeps Basteleur. This is the screen where a figure gets
acted on, so the face stops performing and lets the number be read. The
cards that open FROM this screen come with it, or tapping a bill would
change typeface halfway through the same thought. */
#pane-week h1, #pane-week h2, #pane-week h3,
#pane-week .dow, #pane-week .sign, #pane-week .wallbox b,
#pane-week .trim h2, #pane-week .trow .n,
#pane-week .status #statusWord, #pane-week .status .word,
#toGo, #pane-week .made b, #pane-week .amt, #pane-week .dest,
#nutTop .nt-nm, #nutTop .nt-amt, #nutTop .nt-when,
#nutAsk .na-ask, #nutAsk .na-nm, #nutAsk .na-amt,
#nutWhen .nw-nm, #nutWhen .nw-amt,
#nutBurst{
font-family:GenSans,sans-serif !important;
}
/* the lowercase trick was for Basteleur's alternates. Week is not Basteleur. */
#pane-week .calhead .mo{ text-transform:none !important; }
/* ── the due card, in the flow instead of above it ────────────────────────
It used to be inserted BEFORE the tiles grid, so it always came first and
pushed the box he feeds every day down past the fold. Now it is a grid item
like everything else.
skin.css already ordered these: hot 1, earn 4, bank 5, coming 6, bills 7.
So the card takes 6, which puts it after the bank and before the month
figures. My own ordering block was fighting that and losing, which is why
it is gone rather than left in to confuse the next person. */
#pane-week .tiles > #nutTop{ order:6; grid-column:1 / -1; }
/* ---- FOLDED SECTIONS ------------------------------------------------
A header row you can read at a glance, and the block behind it hidden
rather than deleted. The row is a full width tap target on purpose: the
month calendar already has 26px ticks and this screen should not add more
things too small for a thumb. */
.foldhid{display:none !important}
.foldhd{
display:flex;align-items:center;gap:10px;width:100%;min-height:46px;
margin:6px 0 0;padding:11px 16px;border:0;border-radius:12px;
background:rgba(255,255,255,.045);color:inherit;text-align:left;cursor:pointer;
font:inherit;-webkit-tap-highlight-color:transparent}
.foldhd:hover{background:rgba(255,255,255,.075)}
.foldhd .ft{
flex:1;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.66)}
.foldhd .fv{
font-size:13px;font-weight:700;color:var(--nut-lime,#a9e34b);
font-variant-numeric:tabular-nums}
/* the chevron is drawn, not a glyph, so it cannot fall back to a missing font */
/* Money you are BEHIND must not wear the same green as money you have. */
.foldhd .fv.warn{color:#ff8a4c}
.foldhd .fx{
width:9px;height:9px;flex:none;border-right:2px solid rgba(255,255,255,.5);
border-bottom:2px solid rgba(255,255,255,.5);
transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.foldhd.on .fx{transform:rotate(-135deg) translate(-3px,-3px)}
.foldhd.on{background:rgba(255,255,255,.085)}
.foldhd.on .ft{color:#fff}
@media (prefers-reduced-motion:reduce){ .foldhd .fx{transition:none} }
/* ---- THE EXTRA NOTES -------------------------------------------------
Hidden by default. The numbers are the app; the sentences explaining them
are for the first week. */
#pane-week.nonotes #subLine,
#pane-week.nonotes #perDayNote,
#pane-week.nonotes #todayNote,
#pane-week.nonotes #bankAt,
#pane-week.nonotes #whyLine{display:none}
#pane-week .notetog{
/* 40px, not 25. The sweep caught this one: the month calendar already has
targets too small for a thumb and this screen must not add another. */
display:block;margin:10px 0 0;padding:0 14px;min-height:40px;border:0;border-radius:999px;
background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);
font:inherit;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
cursor:pointer;-webkit-tap-highlight-color:transparent}
#pane-week .notetog:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.72)}
#pane-week .notetog.on{color:rgba(255,255,255,.72)}
/* ---- WHY ARE THERE CROWS --------------------------------------------
Only present while the birds are. Plain sentences, his own two numbers. */
#pane-week #crowWhy{padding:2px 18px 14px}
#pane-week #crowWhy p{margin:0 0 9px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)}
#pane-week #crowWhy p b{color:#ff8a4c;font-weight:800}
#pane-week #crowWhy p.q{margin-bottom:0;color:rgba(255,255,255,.5)}
/* ---- THE BILL NAME HINT ----------------------------------------------
Answers while you type instead of instructing you beforehand. Quiet when it
is happy, orange only when the name will not match anything. */
.nametip{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.45)}
.nametip.ok{color:#8fd14f}
.nametip.warn{color:#ff8a4c}
/* ---- THE SUN AND THE MOON --------------------------------------------
Behind the pile, at the position the sprites were lit from. The glow is a
soft radial rather than a hard edge, because a light source in a picture is
mostly the light, not the disc. */
#nutSky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
#nutPile svg{z-index:1}
/* A photographed sun, not a div with a blur. The corona carries its own glow,
so there is no separate glow layer to fake one: the alpha in the file fades
the light out the way light actually falls off. */
#nutSky .glow{display:none}
#nutSky .body{position:absolute;left:var(--sx,50%);top:var(--sy,20%);
width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:0;background:none;box-shadow:none;
background-image:url(sky/sun.webp);background-size:contain;background-position:center;
background-repeat:no-repeat;opacity:.92}
#nutSky.night .body{width:74px;height:74px;margin:-37px 0 0 -37px;
background-image:url(sky/moon.webp);opacity:.85}
.rd-bird{--cw:40px;width:var(--cw)}
/* ---- SETUP IN STEPS ---------------------------------------------------
The update row first, because it is the control he reaches for most and it
used to be last. The settings grouped by what they are for. */
#setTop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin:0 0 18px;padding:14px 16px;border-radius:12px;
background:rgba(169,227,75,.07);border:1px solid rgba(169,227,75,.18)}
#setTop #updCheck{margin:0}
#setTop #buildStamp{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.42)}
#pane-setup .setfold{margin:14px 0 0}
#pane-setup .setgrp{display:flex;flex-direction:column;gap:12px;padding:12px 2px 2px}
/* the morning ask and the knock-off time are halves of one setting, so they
sit on one line and the sentence that explains them sits under BOTH */
/* The two halves must line up on BOTH edges: labels level with each other and
boxes level with each other. Bottom-anchoring the control lines the boxes up
and leaves the labels ragged; stretching the halves is overridden further
down the cascade. So do it from the top instead, which nothing fights: start
both halves at the same line, and give the labels a shared minimum height so
a label that wraps to two lines still occupies the same box as one that does
not. Deterministic at any width, in any wording. */
#pane-setup .pairrow{display:flex;gap:10px;align-items:flex-start}
#pane-setup .pairrow>.field{flex:1 1 0;min-width:0;margin:0 !important;
display:flex;flex-direction:column}
#pane-setup .pairrow>.field>label{min-height:22px;display:block}
/* Consecutive settings get a hairline and 14px of padding between them, which
is right when they are stacked and wrong when they are side by side: the
right-hand half inherited a separator meant for the row ABOVE it and sat
21px lower than its partner. There is no "between" inside a pair. */
#pane-setup .pairrow>.field + .field{padding-top:0 !important}
#pane-setup .pairrow>.field + .field::before{content:none !important;display:none !important}
#pane-setup .paircap{margin:-4px 2px 2px !important}
/* GLOSS ON THE MONEY BOXES ====================================
He called these square and flat and asked them to read like the buttons
elsewhere. Same recipe as button.go, each surface computed from its own
colour. The input keeps the money legible: the gloss lives on the ROW, the
field inside it goes transparent so one continuous surface reads as one
button instead of a box inside a box. */
#pane-week .tile.earn .moneyrow{
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, #73bb9f 0%, #0e8a5a 48%, #085034 100%) !important;
background-blend-mode: normal, soft-light, normal !important;
color:#eaf7ef !important;
border:0 !important;
border-radius:15px !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(14,138,90,0.28) !important;
}
#pane-week .tile.earn .moneyrow:active, #pane-week .tile.earn .moneyrow:focus-within{
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, #73bb9f 0%, #0e8a5a 52%, #085034 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;
}
#pane-week .tile.bank .moneyrow{
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, #83adcf 0%, #2a72ad 48%, #184264 100%) !important;
background-blend-mode: normal, soft-light, normal !important;
color:#eaf2fb !important;
border:0 !important;
border-radius:15px !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(42,114,173,0.28) !important;
}
#pane-week .tile.bank .moneyrow:active, #pane-week .tile.bank .moneyrow:focus-within{
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, #83adcf 0%, #2a72ad 52%, #184264 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 field sits ON the button, not in a hole cut out of it */
#pane-week .tile.earn .moneyrow input, #pane-week .tile.bank .moneyrow input,
#pane-week .tile.earn .moneyrow .sign, #pane-week .tile.bank .moneyrow .sign{
background:transparent !important; box-shadow:none !important; border:0 !important;
border-radius:0 !important;
}
#pane-week .tile.earn .moneyrow input{ color:#f2fbf5 !important }
#pane-week .tile.bank .moneyrow input{ color:#f2f8ff !important }
#pane-week .tile.earn .moneyrow input::placeholder{ color:rgba(226,247,235,.5) !important }
#pane-week .tile.bank .moneyrow input::placeholder{ color:rgba(226,240,255,.5) !important }
#pane-week .tile.hot .tl{
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, #ffe26b 0%, #ffcd00 48%, #947700 100%) !important;
background-blend-mode: normal, soft-light, normal !important;
color:#5c4700 !important;
border:0 !important;
border-radius:15px 15px 0 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(255,205,0,0.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 0 0 1px rgba(0,0,0,.2) !important;
}
#pane-week .tile.hot .tl:active, #pane-week .tile.hot .tl:focus-within{
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, #ffe26b 0%, #ffcd00 52%, #947700 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 label and the number are ONE surface. Two stacked halves with their own
rims is what made it read as a box rather than a key. */
#pane-week .tile.hot .tv{
border-radius:0 0 15px 15px !important;
box-shadow:
inset 0 -2px 0 rgba(0,0,0,.26),
inset 0 0 0 1px rgba(0,0,0,.2),
0 8px 18px rgba(0,0,0,.5),
0 0 22px rgba(255,205,0,.26) !important;
}
/* "what do these mean?" is a real control, so it gets an edge and a foot. It
stays quiet on purpose: the loud thing on this screen is the number, and two
loud things next to each other cancel out. */
#pane-week #noteTog{
background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
border:1px solid rgba(233,240,220,.16) !important;
border-radius:999px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 7px rgba(0,0,0,.34) !important;
}
#pane-week #noteTog:active{
background:rgba(0,0,0,.24) !important;
box-shadow:inset 0 2px 5px rgba(0,0,0,.44) !important;
}
/* THE TOP OF THE WEEK =====================================================
It was a flat full-bleed black slab with text stacked on it while every
other block in the app sits on a rounded card. The code had already called
it hero-bad.
The system, and it is worth stating because it is what stops this looking
generic: things you PRESS are raised and lit from above, things you READ are
recessed into the surface. The money boxes and the day chip are keys. The
week number is a readout, so it sits in a well with the light falling into
it, not off it. */
#pane-week header.head{
background:rgba(10,16,8,.74) !important;
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
margin:10px var(--nut-inset) 14px !important;
border-radius:var(--nut-r) !important;
padding:19px 18px 17px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.07),
inset 0 0 0 1px rgba(0,0,0,.35),
0 10px 26px rgba(0,0,0,.46) !important;
}
/* the divider was a hard line across a black box. On a card it only needs to
be a seam, so it fades out at both ends instead of hitting the walls. */
#pane-week header.head .rule{
background:linear-gradient(90deg, rgba(233,240,220,0), rgba(233,240,220,.16) 22%,
rgba(233,240,220,.16) 78%, rgba(233,240,220,0)) !important;
height:1px !important; border:0 !important;
}
/* the number sits IN the panel. Inner shadow at the top edge is what sells a
recess: light falls in and stops. The glow is the number's own colour so it
reads as lit glass rather than a drop shadow. */
#pane-week #toGoWrap{
display:inline-block !important;
background:linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.20) 100%) !important;
border-radius:15px !important;
padding:7px 19px 10px !important;
margin-top:3px !important;
box-shadow:
inset 0 3px 7px rgba(0,0,0,.62),
inset 0 0 0 1px rgba(0,0,0,.5),
inset 0 -1px 0 rgba(255,255,255,.06) !important;
}
#pane-week #toGoWrap .big, #pane-week #toGoWrap{
text-shadow:0 0 26px rgba(255,122,60,.34) !important;
}
/* ONE LEFT EDGE. Measured, not eyeballed: the date block sat at 52px and the
digits at 51, but the label and the button sat at 32, so two things in the
top left stuck out twenty pixels further than everything else. Everything
now starts at the same 52. The well around the number keeps its wider edge
on purpose, because it is a frame rather than a line of text. */
#pane-week header.head #heroLabel,
#pane-week header.head #noteTog{ margin-left:20px !important }
#pane-week #toGoWrap{ padding-left:20px !important }
/* ── FORAGE ─────────────────────────────────────────────────────────────
The tab that answers HOW. Fourteen cards, one open at a time.
Shaped like the bill rows rather than like a feed: this is a shelf you
pick something off, not something you scroll. No hairlines anywhere, the
ground shifts instead, same as the rest of the app. */
#pane-forage .sect{padding-top:2px}
#forageIntro{margin:0 0 14px !important;max-width:46ch}
#forageList{display:flex;flex-direction:column;gap:7px}
.fg{background:#0d160a;border-radius:3px;overflow:hidden}
.fg.on{background:#111c0d}
/* the whole head is the tap target, and it is 52px so it clears 26 twice over */
.fg .fghd{display:flex;align-items:baseline;gap:10px;width:100%;
background:none !important;border:0 !important;border-radius:0 !important;
padding:13px 13px 9px !important;text-align:left;cursor:pointer;min-height:44px}
.fg .fgn{font-family:Basteleur,serif !important;font-weight:700;font-size:16px;
line-height:1.15;color:var(--nut-ink);flex:1;min-width:0}
.fg .fgt{font-family:Karrik,sans-serif !important;font-size:8.5px;letter-spacing:.16em;
text-transform:uppercase;color:#8fa37e;background:#16220f;padding:4px 7px 3px;
flex:none;white-space:nowrap}
.fg.on .fgt{background:rgba(169,227,75,.14);color:var(--nut-lime)}
/* cost and time to first money: the only two numbers on the card, and one of
them is a range on purpose */
.fg .fgm{display:flex;gap:16px;padding:0 13px 12px;font-size:11px;color:#b9c7aa}
.fg .fgm i{font-style:normal;font-size:8.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--nut-dim);margin-right:4px}
/* closed by default. A wall of open cards is the same as no cards at all. */
.fg .fgb{max-height:0;opacity:0;overflow:hidden;padding:0 13px;
transition:max-height .26s ease,opacity .18s ease,padding .26s ease}
.fg.on .fgb{max-height:760px;opacity:1;padding:0 13px 13px}
@media (prefers-reduced-motion:reduce){
.fg .fgb{transition:none}
}
.fg .fgw{margin:0 0 10px !important;font-size:13.5px;line-height:1.5;color:#c3cfb6}
.fg .fgneed{margin:0 0 11px !important;font-size:11.5px;line-height:1.45;color:#9fb08f}
.fg .fgneed b{display:block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--nut-dim);font-weight:400;margin-bottom:3px}
.fg .fgs{margin:0;padding:0 0 0 17px;display:flex;flex-direction:column;gap:6px}
.fg .fgs li{font-size:13px;line-height:1.45;color:#c3cfb6;padding-left:2px}
.fg .fgs li::marker{color:var(--nut-lime);font-size:11px}
/* the line that must never change, on every card, every time */
.fg .fgfoot{margin:12px 0 0 !important;font-size:10px;line-height:1.45;
color:#5f6f53;max-width:44ch}
/* the one button on a forage card, and what replaces it once it is used */
.fg .fgadd{display:block;width:100%;margin-top:13px;
background:linear-gradient(180deg,#bff05c,#8cc734) !important;
color:#132000 !important;border:0 !important;border-radius:3px !important;
font-family:Karrik,sans-serif !important;font-size:11.5px;letter-spacing:.11em;
text-transform:uppercase;padding:13px 10px 11px !important;min-height:44px;
box-shadow:0 2px 0 #5e8a1e, inset 0 1px 0 rgba(255,255,255,.5);cursor:pointer}
.fg .fgin{margin:13px 0 0 !important;font-size:11.5px;line-height:1.45;
color:var(--nut-lime);background:rgba(169,227,75,.1);padding:10px 11px 9px}
.fg .fgfree{margin:13px 0 0 !important;font-size:11.5px;line-height:1.45;
color:#9fb08f;background:#16220f;padding:10px 11px 9px}
/* logging what a project brought in */
.fg .fglog{margin-top:10px}
.fg .fglog label{display:block;font-size:8.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--nut-dim);margin-bottom:5px}
.fg .fglr{display:flex;gap:8px}
.fg .fglr .f{flex:1 1 auto;min-width:0;margin:0 !important}
.fg .fglb{flex:0 0 auto;background:linear-gradient(180deg,#bff05c,#8cc734) !important;
color:#132000 !important;border:0 !important;border-radius:3px !important;
font-family:Karrik,sans-serif !important;font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;padding:0 15px !important;min-height:44px;cursor:pointer;
box-shadow:0 2px 0 #5e8a1e, inset 0 1px 0 rgba(255,255,255,.5)}
.fg .fglw{margin:7px 0 0 !important;font-size:9.5px;color:#5f6f53}
/* ── WHERE THE WORK LIVES ──────────────────────────────────────────────── */
#pane-forage .fgsub{font-family:Basteleur,serif !important;font-weight:700 !important;
font-size:19px !important;color:var(--nut-ink) !important;margin:26px 0 2px !important;
letter-spacing:0 !important;text-transform:none !important}
#pane-forage .fgsubn{margin:0 0 13px !important;max-width:46ch}
.stcat{font-family:Karrik,sans-serif !important;font-size:8.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--nut-dim);margin:16px 0 6px !important;font-weight:400 !important}
.stgrp{display:flex;flex-direction:column;gap:7px}
/* a site is a LINK, and has to look like one you can hit with a thumb */
a.st{display:block;background:#0d160a;border-radius:3px;padding:12px 13px;
text-decoration:none !important;min-height:44px}
a.st .sthd{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
a.st .sthd b{font-family:Basteleur,serif !important;font-weight:700;font-size:15px;
color:var(--nut-ink);flex:1;min-width:0}
a.st .sthd i{font-style:normal;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
color:#8fa37e;background:#16220f;padding:4px 7px 3px;flex:none;white-space:nowrap}
a.st .stw{display:block;font-size:12.5px;line-height:1.45;color:#c3cfb6;margin-bottom:5px}
a.st .stn{display:block;font-size:11px;line-height:1.45;color:#8fa37e}
/* the cards carrying his link. Marked, and the disclosure is ON the card. */
a.st.mine{background:#111c0d;box-shadow:inset 3px 0 0 var(--nut-yel)}
a.st .staff{display:block;margin-top:8px;font-size:10px;line-height:1.4;
color:var(--nut-yel);background:rgba(255,205,0,.09);padding:8px 9px 7px}
/* the three buckets: how do I make more, spend less, fix this */
.stsect{font-family:Basteleur,serif !important;font-weight:700 !important;
font-size:21px !important;line-height:1.15 !important;color:var(--nut-ink) !important;
margin:30px 0 3px !important;letter-spacing:0 !important;text-transform:none !important}
.stsect:first-child{margin-top:6px !important}
.stsectn{margin:0 0 4px !important;max-width:46ch}
/* ── TODAY'S WATCH ─────────────────────────────────────────────────────── */
#todayWatch{margin:0 0 20px}
.tw{background:#111c0d;border-radius:3px;padding:14px 14px 13px}
.twk{display:block;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--nut-yel);margin-bottom:7px}
.twt{font-family:Basteleur,serif !important;font-weight:700 !important;font-size:17px !important;
line-height:1.2 !important;color:var(--nut-ink) !important;margin:0 0 5px !important;
letter-spacing:0 !important;text-transform:none !important}
.twb{display:block;font-size:10.5px;letter-spacing:.06em;color:#8fa37e;margin-bottom:8px}
.tww{margin:0 0 12px !important;font-size:12.5px;line-height:1.45;color:#c3cfb6}
.twp{display:block;width:100%;background:linear-gradient(180deg,#bff05c,#8cc734) !important;
color:#132000 !important;border:0 !important;border-radius:3px !important;
font-family:Karrik,sans-serif !important;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;padding:13px 10px 11px !important;min-height:44px;cursor:pointer;
box-shadow:0 2px 0 #5e8a1e, inset 0 1px 0 rgba(255,255,255,.5)}
.twn{margin:8px 0 0 !important;font-size:9.5px;color:#5f6f53}
/* 16:9 without a hard-coded height, so it fits any phone */
.twf{position:relative;width:100%;padding-top:56.25%;border-radius:3px;overflow:hidden;background:#000}
.twf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ── the squirrel at the top of Earn ───────────────────────────────────────
It holds the nut up in the light, which is the idea of the whole tab: you
went out and got it. Faded into the ground at the bottom so it reads as part
of the forest the app already sits on, rather than a picture pasted on top.
The width is forced. This skin sets image sizes with !important in several
places, and a plain width:100% lost that fight: the 768px source rendered at
full size and pushed the entire page sideways. */
.hero-sq{margin:0 0 16px;position:relative;border-radius:3px;overflow:hidden;background:#0a1207}
.hero-sq img{display:block;width:100% !important;max-width:100% !important;height:auto !important}
.hero-sq::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
background:linear-gradient(180deg,rgba(8,14,6,0) 0%,rgba(8,14,6,.92) 88%);pointer-events:none}
.hero-sq figcaption{position:absolute;left:14px;right:14px;bottom:11px;z-index:2;
font-family:Basteleur,serif !important;font-weight:700;font-size:17px;
color:var(--nut-ink);text-shadow:0 2px 14px rgba(0,0,0,.85)}
/* the video shows its own face. 16:9, tap anywhere on it. */
.tw{padding:0 !important;background:none !important}
.twshot{display:block;position:relative;width:100%;padding:0 !important;border:0 !important;
background:#000 !important;border-radius:3px;overflow:hidden;cursor:pointer;line-height:0}
.twshot img{display:block;width:100% !important;height:auto !important;
aspect-ratio:16/9;object-fit:cover;opacity:.86}
.twshot .twk{position:absolute;left:11px;top:10px;z-index:2;line-height:1;
background:rgba(8,14,6,.72);padding:6px 9px 5px;margin:0}
.twplay{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;
border-radius:50%;background:rgba(169,227,75,.94);z-index:2;
box-shadow:0 6px 22px rgba(0,0,0,.55)}
.twplay::after{content:"";position:absolute;left:24px;top:19px;
border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #132000}
.twt{margin:11px 0 3px !important}
.twb{margin-bottom:0 !important}
/* the surviving notes are warnings, so they should look like warnings */
a.st .stn.warn{color:#e8a05c}
/* A YouTube thumbnail is built to shout on a white page and this app is a dark
forest. Knock it back and lay a scrim over the top edge so the label reads
against whatever the picture happens to be, then let the lime play button be
the brightest thing, which is also the thing to press. */
.twshot img{opacity:.72 !important}
.twshot::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;z-index:1;
background:linear-gradient(180deg,rgba(8,14,6,.78),rgba(8,14,6,0))}
.twshot::after{content:"";position:absolute;inset:0;z-index:1;
background:radial-gradient(120% 90% at 50% 50%,rgba(8,14,6,0) 30%,rgba(8,14,6,.55) 100%)}
/* with the vague heading gone, the video sits straight under the squirrel */
#pane-forage .sect .sign.right > #todayWatch{margin-top:2px}
/* EARN. SAVE. PROGRESS. — his words, and the third one is the choice worth
keeping. The obvious version of this phrase ends on "invest", which assumes
you already have something spare. Progress does not assume that, and it is
the only one of the three that a person who is behind can do this week.
It is also, in order, exactly what the tab underneath it offers. */
.hero-sq figcaption{left:0;right:0;bottom:13px;text-align:center;
font-family:Karrik,sans-serif !important;font-weight:400 !important;
font-size:13px !important;letter-spacing:.34em;text-transform:uppercase;
color:var(--nut-ink);text-shadow:0 2px 16px rgba(0,0,0,.95)}
.hero-sq figcaption b{font-weight:400;display:inline-block;padding:0 .18em}
.hero-sq figcaption b:nth-child(2){color:var(--nut-lime)}
/* the label lives above the player so it survives pressing play */
.tw .twk{position:static !important;display:block;background:none !important;
padding:0 0 7px !important;margin:0 !important;color:var(--nut-yel);
font-size:9px;letter-spacing:.2em;text-transform:uppercase;line-height:1.2}
.twshot::before{height:0 !important}
/* two halves of one line: what it is, then what it is for */
.tw .twk i{font-style:normal;color:#5f6f53;padding:0 .25em}
/* RECOMMENDED reads as an endorsement, so it gets the gold. The disclosure
under it is quieter but must stay legible: it is the line that keeps the
endorsement honest, and a disclosure nobody can read is not a disclosure. */
a.st .sthd i.rec{background:var(--nut-yel) !important;color:#5c4600 !important;
font-weight:400;letter-spacing:.14em}
a.st .staff{color:#d8c47a;background:rgba(255,205,0,.08);font-size:10.5px;
letter-spacing:.02em}
/* ── WHAT I USE: his own shelf, above the directory ──────────────────────── */
#pickList{margin:0 0 8px}
.pkd{margin:0 0 12px !important;font-size:10.5px;line-height:1.5;color:#d8c47a;
background:rgba(255,205,0,.08);padding:9px 11px 8px}
.pkcat{font-family:Karrik,sans-serif !important;font-size:8.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--nut-dim);margin:14px 0 6px !important;font-weight:400 !important}
.pkgrp{display:flex;flex-direction:column;gap:6px}
a.pk{display:block;background:#141f0f;border-radius:3px;padding:11px 13px;
text-decoration:none !important;min-height:44px;box-shadow:inset 3px 0 0 var(--nut-yel)}
a.pk .pkn{display:block;font-family:Basteleur,serif !important;font-weight:700;
font-size:15px;color:var(--nut-ink);margin-bottom:3px}
a.pk .pkw{display:block;font-size:12px;line-height:1.4;color:#b9c7aa}
/* short enough that it reads as a statement rather than a notice */
.pkd{letter-spacing:.02em;font-size:12px !important;color:#b9c7aa !important;
background:none !important;padding:0 2px 4px !important;margin:0 0 10px !important}
/* the recommended block is one flat run of cards; the category is a tag on the
card rather than a heading above it */
a.pk .pkhd{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
a.pk .pkn{margin-bottom:0 !important;flex:1;min-width:0}
a.pk .pkc{flex:none;font-family:Karrik,sans-serif !important;font-size:8px;
letter-spacing:.16em;text-transform:uppercase;color:#8fa37e;background:#16220f;
padding:4px 7px 3px;white-space:nowrap}
/* ── THE DOOR ─────────────────────────────────────────────────────────────
Covers the app, never replaces it. Their numbers are still mounted behind
this, which is why the copy can honestly say nothing has been lost. */
#nutGate{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
justify-content:center;padding:26px;background:rgba(6,11,5,.94);
backdrop-filter:blur(3px)}
body.gated{overflow:hidden}
#nutGate .gt{max-width:400px;width:100%;background:#0d160a;border-radius:4px;
padding:26px 22px 24px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
#nutGate h2{font-family:Basteleur,serif !important;font-weight:700 !important;
font-size:25px !important;line-height:1.1 !important;color:var(--nut-ink) !important;
margin:0 0 10px !important;letter-spacing:0 !important;text-transform:none !important}
#nutGate .gtp{margin:0 0 18px !important;font-size:14.5px;line-height:1.55;color:#c3cfb6}
#nutGate .go{display:block;width:100%;margin-bottom:14px}
#nutGate .gtrow{display:flex;gap:8px}
#nutGate .gtrow .f{flex:1 1 auto;min-width:0;margin:0 !important}
#nutGate .gtrow .dark{flex:0 0 auto;white-space:nowrap}
#nutGate .gts{margin:10px 0 0 !important;font-size:11.5px;color:#e8a05c;min-height:14px}
/* The overlay sits outside #app, so the skin's button rules never reached it
and the code button rendered as a raw browser button: white box, black text,
in the middle of a dark green door. Styled here explicitly rather than by
hoping a class carries. */
#nutGate .dark{background:#16220f !important;color:#c3cfb6 !important;
border:0 !important;border-radius:3px !important;
font-family:Karrik,sans-serif !important;font-size:10.5px !important;
letter-spacing:.13em !important;text-transform:uppercase !important;
padding:0 14px !important;min-height:48px;cursor:pointer}
#nutGate .f{background:#0a1207 !important;color:var(--nut-ink) !important;
border:0 !important;border-radius:3px !important;min-height:48px;
padding:0 13px !important;font-family:Karrik,sans-serif !important;font-size:14px !important}
/* The code row in Setup had the same problem as the door: a raw browser button
in the middle of the skin, and the two halves stacked instead of sitting on
one line. Both fixed here rather than relying on a class from elsewhere. */
#subBox .row2{display:flex;gap:8px;align-items:stretch}
#subBox .row2 .f{flex:1 1 auto;min-width:0;margin:0 !important}
#subBox .row2 .dark{flex:0 0 auto;white-space:nowrap;
background:#16220f !important;color:#c3cfb6 !important;border:0 !important;
border-radius:3px !important;font-family:Karrik,sans-serif !important;
font-size:10.5px !important;letter-spacing:.13em !important;
text-transform:uppercase !important;padding:0 15px !important;min-height:48px;cursor:pointer}
#subBox #subCodeSay{margin:7px 0 0 !important;color:#e8a05c;min-height:12px}
#subBox .go{display:block;width:100%}
#trialSay{color:var(--nut-lime) !important}
/* the squirrel does the explaining in the door */
#nutGate .gt{padding:0 0 22px !important;overflow:hidden}
#nutGate .gtimg{display:block;width:100% !important;height:auto !important;opacity:.9}
#nutGate h2{margin:16px 20px 8px !important}
#nutGate .gtp{margin:0 20px 18px !important}
#nutGate .go,#nutGate .gtrow,#nutGate .gts{margin-left:20px;margin-right:20px}
#subNote a{color:var(--nut-lime) !important;text-decoration:none !important}
/* width:100% PLUS a 20px margin each side is 40px wider than the card, so the
button ran off the edge. A block element with width auto fills what is left
after its margins, which is what was wanted all along. */
#nutGate .go{width:auto !important;display:block}
#nutGate .gtrow{margin-left:20px;margin-right:20px}
/* A