/* ============================================================
   MONEYINGS (1.30): in the MDT look, gold on near-black like the
   rest of maximusdevtech.co.uk (see branding/BRAND.md and site.css).
   Gold is the brand: buttons, the active tab, goals. The money
   colours stay meaningful on top of it: green for what is left,
   coral for fixed bills, blue for variable spending.
   ============================================================ */
:root{
  --bg:#0b0a09; --panel:#151411; --panel-2:#1c1a16; --field:#100f0d;
  --line:rgba(255,236,190,.09); --line-2:rgba(255,236,190,.16);
  --ink:#f5f0e6; --muted:#a39b8b; --faint:#7a7366;
  --gold:#dba63c; --gold-hi:#f8e3a8; --gold-deep:#9a6f22;
  --gold-grad:linear-gradient(120deg,#f8e3a8 0%,#dba63c 45%,#9a6f22 100%);
  --good:#3fc98a;      /* what is left over */
  --fixed:#ff7a6b;     /* coral - committed, fixed bills */
  --variable:#6aa5ff;  /* blue - flexible, variable spend */
  --radius:18px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 480px at 85% -12%,rgba(219,166,60,.12),transparent 60%);
  background-attachment:fixed;
}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer;
  transition:transform .09s ease, background .16s ease, border-color .16s ease, color .16s ease;
  -webkit-user-select:none; user-select:none;}
button:active{transform:scale(.975);}
button:disabled:active{transform:none;}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
h1,h2,h3{margin:0; line-height:1.2;}

.app{max-width:760px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;}

/* the gate's logo: the app icon */
.mark{display:flex; align-items:center; justify-content:center; gap:12px; font-size:28px; font-weight:850; letter-spacing:-.02em;}
.mark img{width:46px; height:46px; border-radius:12px; box-shadow:0 0 0 1px rgba(219,166,60,.4), 0 10px 24px -10px rgba(219,166,60,.6);}

/* the four totals under the MDT bar */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px 14px 0;}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 6px; text-align:center; min-width:0;}
.stat .k{font-size:9.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--faint); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stat .v{font-size:15.5px; font-weight:850; font-variant-numeric:tabular-nums; margin-top:2px; white-space:nowrap;}
.stat .v.good{color:var(--good);}
.stat .v.bad{color:var(--fixed);}
@keyframes pop{0%{transform:scale(1)} 35%{transform:scale(1.14)} 100%{transform:scale(1)}}
.stat .v.pop{animation:pop .5s ease;}

main{flex:1; padding:14px; display:flex; flex-direction:column; gap:14px;}
#screen > div{display:flex; flex-direction:column; gap:14px;}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.card h2{font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; font-weight:800;}
.card p.note{font-size:12.5px; color:var(--muted); margin:8px 0 0;}
.card p.lede{font-size:14px; margin:0 0 4px;}

.nudge{border-color:rgba(219,166,60,.45); background:linear-gradient(180deg, rgba(219,166,60,.10), rgba(219,166,60,0) 70%), var(--panel);}
.nudge.alert{border-color:rgba(255,122,107,.5); background:linear-gradient(180deg, rgba(255,122,107,.12), rgba(255,122,107,0) 70%), var(--panel);}
.nudge.alert h2{color:var(--fixed);}

.hero-card{border-color:rgba(219,166,60,.3);}
.hero-num{font-size:42px; font-weight:850; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--good);}
.hero-num.bad{color:var(--fixed);}
.hero-sub{font-size:13px; color:var(--muted); margin-top:2px; font-weight:600;}
.hero-fun{font-size:12.5px; color:var(--muted); margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.hero-fun b{color:var(--ink);}

.btn{border:0; border-radius:999px; padding:11px 18px; font-weight:800; min-height:46px;
  background:var(--gold-grad); color:#1a1206; box-shadow:0 10px 24px -14px rgba(219,166,60,.8);}
.btn:hover{filter:brightness(1.06);}
.btn:disabled{background:var(--panel-2); color:var(--faint); box-shadow:none; cursor:not-allowed; filter:none;}
.btn.wide{width:100%; font-size:15px;}
.btn.ghost{background:rgba(255,255,255,.03); color:var(--ink); border:1px solid var(--line-2); box-shadow:none;}
.btn.ghost:hover{border-color:rgba(248,227,168,.45); background:rgba(255,255,255,.06); filter:none;}
.btn.danger{background:transparent; color:var(--fixed); border:1px solid rgba(255,122,107,.45); box-shadow:none;}
.btn.danger:hover{background:rgba(255,122,107,.1); filter:none;}
.btn.danger.armed{background:var(--fixed); color:#1a0806;}
.btn.sm{padding:8px 14px; min-height:40px; font-size:13px;}
.btnrow{display:flex; gap:8px; margin-top:8px;}
.btnrow .btn{flex:1;}

.chiprow{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 12px;}
.chip{border:1px dashed var(--line-2); background:transparent; color:var(--muted);
  border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:700;}
.chip:hover{border-color:var(--gold); color:var(--gold-hi); border-style:solid;}
.chip.on{border-style:solid; border-color:var(--gold); color:#1a1206; background:var(--gold-grad);}
.chip.add{border-style:solid; border-color:rgba(219,166,60,.5); color:var(--gold-hi);}
.chip.add:hover{background:rgba(219,166,60,.1);}

.custrow{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 2px; border-top:1px solid var(--line);}
.custrow:first-child{border-top:0;}
.custrow .iname{font-weight:700; font-size:14px;}
.addrow{display:flex; gap:8px; margin-top:12px;}
.addrow .field{flex:1; margin-bottom:0;}

.itemlist{margin-top:2px;}
.item{display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 4px; border:0; border-top:1px solid var(--line); background:transparent;
  text-align:left; color:inherit; font:inherit; border-radius:0;}
.item:first-child{border-top:0;}
.item:hover{background:rgba(255,255,255,.02);}
.item .ilabel{display:flex; flex-direction:column; gap:2px; min-width:0;}
.item .iname{font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.item .idur{font-size:11.5px; color:var(--faint); font-weight:600;}
.item .idur.fin{color:var(--fixed); font-weight:800;}
.item .iamt{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;}
.item .iamt small{display:block; font-size:11px; color:var(--faint); font-weight:600;}
.empty{font-size:13.5px; color:var(--muted); padding:6px 2px 4px; margin:0;}

.totalrow{display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; margin-top:6px; border-top:1px solid var(--line-2); font-weight:850;}
.totalrow .pct{font-size:11px; color:var(--faint); font-weight:700; margin-left:7px;}

.bar{height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; margin-top:9px;}
.bar i{display:block; height:100%; border-radius:4px; background:var(--good); transition:width .3s ease;}
.bar i.warn{background:var(--gold);}
.bar i.bad{background:var(--fixed);}
.bar i.goldfill{background:var(--gold-grad);}
.gauge-lab{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:700; color:var(--muted); margin-top:2px;}
.gauge-lab b{color:var(--ink); white-space:nowrap;}

.donut-wrap{display:flex; align-items:center; gap:22px; margin-top:4px;}
.donut{width:132px; height:132px; border-radius:50%; flex:0 0 132px; display:flex; align-items:center; justify-content:center;}
.donut-hole{width:88px; height:88px; border-radius:50%; background:var(--panel); display:flex; flex-direction:column;
  align-items:center; justify-content:center;}
.donut-hole b{font-size:20px; font-weight:850; font-variant-numeric:tabular-nums;}
.donut-hole small{font-size:9px; color:var(--faint); font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-top:1px;}
.legend{display:flex; flex-direction:column; gap:10px; flex:1; min-width:0;}
.legend .lrow{display:flex; align-items:center; gap:8px; font-size:13px;}
.legend i{width:10px; height:10px; border-radius:3px; flex:0 0 10px;}
.legend .lname{flex:1; color:var(--muted); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.legend .lval{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}

.goal{display:block; width:100%; text-align:left; border:1px solid var(--line-2); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:var(--panel-2); color:inherit;}
.goal:hover{border-color:rgba(219,166,60,.45);}
.goal:last-child{margin-bottom:0;}
.goal.done{border-color:var(--gold); background:linear-gradient(180deg, rgba(219,166,60,.14), rgba(219,166,60,.02)), var(--panel-2);}
.goal .grow1{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px;}
.goal .gname{font-weight:800; font-size:14.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.goal .gnums{font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap;}
.goal .gleft{font-size:11.5px; color:var(--faint); font-weight:600; margin-top:6px;}
.goal .gtag{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  background:var(--gold-grad); color:#1a1206; border-radius:6px; padding:1px 7px; margin-left:6px; vertical-align:1px;}
.goal-add{width:100%; border:1px dashed var(--line-2); background:transparent; color:var(--muted);
  border-radius:14px; padding:13px; font-weight:700; font-size:13.5px;}
.goal-add:hover{border-color:var(--gold); color:var(--gold-hi);}

.chart{display:flex; align-items:flex-end; gap:5px; height:120px; margin-top:8px;}
.chart .col{flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-width:0;}
.chart .b{border-radius:5px 5px 0 0; background:var(--good); min-height:2px; transition:height .3s ease; opacity:.85;}
.chart .b.bad{background:var(--fixed);}
.chart .col.now .b{opacity:1; box-shadow:0 0 0 1px var(--gold) inset;}
.chart .lab{font-size:9.5px; text-align:center; color:var(--faint); font-weight:800; padding-top:5px;}
.chart .col.now .lab{color:var(--gold-hi);}

.months{margin-top:12px;}
.mrow{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:11px 2px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums;}
.mrow:first-child{border-top:0;}
.mrow .mname{font-weight:800; font-size:14px;}
.mrow .mname small{display:block; font-size:11.5px; color:var(--faint); font-weight:600;}
.mrow .mleft{font-weight:850; text-align:right; white-space:nowrap;}
.mrow .mleft small{display:block; font-size:11px; font-weight:700;}
.up{color:var(--good);} .down{color:var(--fixed);} .same{color:var(--faint);}
.tag-now{display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#1a1206; background:var(--gold-grad); border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:1px;}
.xbtn{border:0; background:transparent; color:var(--faint); font-size:12px; font-weight:800; padding:6px 8px; line-height:1; border-radius:8px;}
.xbtn:hover{color:var(--fixed);}
.xbtn.armed{background:var(--fixed); color:#1a0806;}
.xbtn.ph{visibility:hidden;}

.syncline{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; margin:0 0 12px;}
.syncline i{width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 0 4px rgba(63,201,138,.15); flex:0 0 9px;}
.syncline i.local{background:var(--gold); box-shadow:0 0 0 4px rgba(219,166,60,.15);}
.syncline small{display:block; color:var(--muted); font-weight:600; font-size:12.5px;}
.linkbtn{display:block; width:100%; background:transparent; border:0; color:var(--gold-hi); font-weight:700; font-size:13px; padding:10px; margin-top:2px;}
.linkbtn:hover{text-decoration:underline;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.field input{width:100%; border:1px solid var(--line-2); border-radius:12px; padding:12px 13px;
  font-size:16px; font-family:inherit; color:var(--ink); background:var(--field);}
.field input::placeholder{color:var(--faint);}
.field input:focus{outline:none; border-color:var(--gold); background:#13120f;}
.field .hint{font-size:12px; color:var(--muted); margin-top:6px;}
.amtrow{display:flex; gap:8px;}
.amtrow input{flex:1; min-width:0;}
.seg{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}

.nav{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  position:sticky; bottom:0; z-index:20;
  background:rgba(11,10,9,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.nav button{
  border:0; background:transparent; color:var(--muted);
  font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:8px 2px; border-radius:999px; min-height:44px;
}
.nav button:hover{color:var(--ink);}
.nav button.on{background:var(--gold-grad); color:#1a1206;}
.nav button .badge{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--fixed); margin-left:4px; vertical-align:middle;}
.nav button.on .badge{background:#1a1206;}

.modal-host{
  position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  animation:fade .16s ease-out; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
@keyframes fade{from{opacity:0} to{opacity:1}}
.modal{
  background:var(--panel); border:1px solid var(--line-2); border-bottom:0; border-radius:24px 24px 0 0; width:100%; max-width:520px;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:min(88vh, calc(100dvh - var(--mdts-h, 0px) - 12px)); overflow:auto; overscroll-behavior:contain;
  animation:rise .26s cubic-bezier(.2,.85,.3,1);
}
@keyframes rise{from{transform:translateY(30px); opacity:.5} to{transform:none; opacity:1}}
.modal:before{content:""; display:block; width:38px; height:4px; border-radius:3px; background:var(--line-2); margin:2px auto 14px;}
@media (min-width:600px){
  .modal-host{align-items:center; padding:18px;}
  .modal{border-radius:22px; border-bottom:1px solid var(--line-2); padding-bottom:18px;}
}
.modal .kicker{font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
.modal h3{font-size:20px; margin-bottom:14px; letter-spacing:-.01em;}
.modal p{margin:0 0 14px; font-size:14.5px; color:var(--muted);}
.modal p b{color:var(--ink);}

.hero{text-align:center; padding:26px 18px;}
.hero .sub{color:var(--muted); font-size:13.5px; margin-top:8px;}
.spinner{width:30px; height:30px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--gold);
  animation:spin .8s linear infinite; margin:6px auto 0;}
@keyframes spin{to{transform:rotate(360deg)}}
.autherr{color:var(--fixed); font-size:13px; font-weight:700; margin:12px 0 -4px; text-align:left;}

.note{font-size:12.5px; color:var(--muted); margin-top:10px;}
.hide-file{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0;}
@media (max-width:380px){ .stats{gap:6px; padding:10px 10px 0;} .stat .v{font-size:13.5px;} .hero-num{font-size:34px;} .donut-wrap{flex-direction:column; align-items:flex-start;} }
@media (min-width:700px){ main{padding:18px 14px; gap:16px;} }
/* 1.31, wide screens (the owner: no big gaps at the sides on a laptop): the app uses the width of the
   screen and the cards sit side by side; sheets stay their own size */
@media (min-width:1000px){
  .app{max-width:1680px; padding:0 clamp(0px,2.5vw,40px);}
  #screen > div{display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); align-items:start;}
  #screen > div > .nudge{grid-column:1 / -1;}
  #screen > .card.hero, #screen > .guestpick{max-width:560px; width:100%; margin-left:auto; margin-right:auto;}
  .nav{max-width:760px; margin:0 auto; width:100%; border-radius:999px 999px 0 0; border:1px solid var(--line); border-bottom:0;}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }

/* ---------- guest mode ---------- */
.guestpick{margin-bottom:12px; text-align:center;}
#screen > .card.hero + .guestpick{margin:12px 0 0;}
.guestpick p{font-size:13px; color:var(--muted); margin:0 0 12px;}
.guestpick h2{color:var(--gold);}

/* the shared Google button and its note on the gate */
.mdtx-gnote{text-align:center;}