/* Grocery Planner — soft neumorphism theme, vanilla CSS (no build step).
   Single-surface (cards share the page colour) with paired light/dark shadows
   to extrude or press elements. Palette is a fresh-produce green on warm sage. */

:root{
  --bg:#e7ecdf;            /* warm sage off-white — page + every surface */
  --text:#39473c;         /* deep green-grey ink */
  --muted:#8b988a;        /* secondary text */
  --faint:#a7b2a4;        /* placeholders / hints */

  --accent:#5a9c6e;       /* fresh leaf green */
  --accent-deep:#3f7d54;  /* darker green for text on light */
  --accent-soft:#dfeadd;  /* green-tinted highlight */
  --carrot:#e0894f;       /* warm produce accent */
  --danger:#cf6049;       /* tomato red */

  --sh-dark:#c3cbb6;      /* neumorphic dark shadow */
  --sh-light:#ffffff;     /* neumorphic light shadow */

  /* shadow recipes */
  --raise:6px 6px 13px var(--sh-dark), -6px -6px 13px var(--sh-light);
  --raise-sm:4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light);
  --press:inset 4px 4px 8px var(--sh-dark), inset -4px -4px 8px var(--sh-light);
  --press-sm:inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);

  --r-lg:24px; --r-md:16px; --r-sm:12px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  font-family:-apple-system,system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
input,select,button{font:inherit; color:inherit}
input:focus,select:focus{outline:none}
::selection{background:var(--accent-soft)}

.serif{font-family:"Newsreader",Georgia,serif; font-weight:600; letter-spacing:-.01em}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.muted{color:var(--muted)}
.small{font-size:.8rem}

/* Soft layered backdrop — gentle produce-toned glows drifting over the matte
   sage surface, plus a faint grain so large flats don't band on wide screens. */
.bg-aurora{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden;
  background:
    radial-gradient(55% 50% at 12% -5%,rgba(255,255,255,.55),transparent 68%),
    radial-gradient(50% 45% at 92% 8%,rgba(224,137,79,.07),transparent 70%),
    radial-gradient(65% 60% at 88% 105%,rgba(90,156,110,.13),transparent 70%),
    radial-gradient(45% 40% at 0% 90%,rgba(90,156,110,.07),transparent 72%),
    var(--bg);
}
/* slow, barely-there drifting glow on top of the static layers */
.bg-aurora::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(38% 38% at 25% 30%,rgba(90,156,110,.10),transparent 70%),
    radial-gradient(34% 34% at 75% 70%,rgba(255,255,255,.35),transparent 70%);
  filter:blur(8px);
  animation:auroraDrift 26s ease-in-out infinite;
  will-change:transform;
}
/* fine grain to keep the broad gradients from banding */
.bg-aurora::after{
  content:""; position:absolute; inset:0;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes auroraDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .bg-aurora::before{animation:none}
}

.app{min-height:100vh}

/* Keyframes */
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes rowIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@keyframes toastIn{from{transform:translate(-50%,160%)} to{transform:translate(-50%,0)}}
@keyframes pop{0%{transform:scale(.92)} 55%{transform:scale(1.03)} 100%{transform:scale(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}

/* ---------- Header ---------- */
.app-header{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  box-shadow:0 6px 16px rgba(120,134,110,.22);
  padding:calc(1rem + env(safe-area-inset-top)) clamp(1rem,4vw,1.9rem) 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:.8rem}
.logo{
  width:48px; height:48px; border-radius:16px;
  background:var(--bg); color:var(--accent-deep);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--raise-sm);
  animation:floaty 4s ease-in-out infinite;
}
.brand h1{margin:0; font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:1.45rem; letter-spacing:-.015em}
.tagline{
  margin:0; font-family:"JetBrains Mono",monospace; font-size:.6rem;
  letter-spacing:.2em; color:var(--muted); text-transform:uppercase;
}
.month-pick{display:flex; align-items:center; gap:.55rem}
.cal-ic{color:var(--muted); display:flex}
.month-pick input{
  border:none; border-radius:var(--r-sm); padding:.55rem .8rem;
  font-family:"JetBrains Mono",monospace; font-size:.85rem;
  background:var(--bg); box-shadow:var(--press-sm); color:var(--text);
}

/* ---------- Tabs ---------- */
.tabs{
  position:sticky; top:0; z-index:15;
  display:flex; justify-content:center; gap:.8rem; padding:1.1rem 1rem;
}
.tab{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:50px; border-radius:var(--r-md); cursor:pointer;
  transition:box-shadow .25s, color .25s, transform .12s;
  border:none; background:var(--bg); color:var(--muted);
  box-shadow:var(--raise-sm);
}
.tab:active{transform:scale(.96)}
.tab.active{
  color:var(--accent-deep);
  box-shadow:var(--press);
}

/* ---------- Layout ---------- */
.container{max-width:1060px; margin:0 auto; padding:clamp(.7rem,3vw,1.5rem)}
.view{display:none}
.view.active{display:block; animation:fadeUp .4s ease}

.card{
  background:var(--bg);
  border-radius:var(--r-lg);
  box-shadow:var(--raise);
  padding:clamp(1.1rem,2.5vw,1.6rem); margin-bottom:1.3rem;
}
h2.serif{margin:0; font-size:1.25rem}
h2.small-h{font-size:1.1rem; margin-bottom:.6rem}

/* ---------- Icon buttons ---------- */
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-sm); cursor:pointer;
  border:none; background:var(--bg);
  transition:box-shadow .18s, transform .12s, color .18s;
  box-shadow:var(--raise-sm); color:var(--accent-deep);
}
.btn-icon:hover{color:var(--accent)}
.btn-icon:active{transform:scale(.94); box-shadow:var(--press-sm)}
.btn-icon.primary{color:#fff; background:linear-gradient(135deg,#67ab7c,#4c8a60);
  box-shadow:4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light)}
.btn-icon.primary:hover{color:#fff}
.btn-icon.primary:active{box-shadow:var(--press-sm)}
.btn-icon.glass{color:var(--accent-deep)}
.btn-icon.danger{color:var(--danger)}

/* ---------- Inputs ---------- */
input[type=text],input[type=number],input[type=month],select{
  border:none; border-radius:var(--r-sm); padding:.7rem .9rem;
  background:var(--bg); box-shadow:var(--press-sm); color:var(--text); font-size:.95rem;
  transition:box-shadow .18s;
}
input[type=text]:focus,input[type=number]:focus,input[type=month]:focus,select:focus{
  box-shadow:var(--press-sm), 0 0 0 2px var(--accent-soft);
}
input::placeholder{color:var(--faint)}
select{padding:.7rem .65rem; font-size:.9rem; cursor:pointer}

/* ---------- Current list bar ---------- */
.current-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.cur-name{display:flex; flex-direction:column; gap:.12rem}
.eyebrow{font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}
.cur-name strong{font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:1.5rem; letter-spacing:-.01em}
.cur-actions{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; flex:1; justify-content:flex-end}
.cur-actions input{flex:1; min-width:140px; max-width:230px}

/* ---------- Add card ---------- */
.add-card h2{margin-bottom:1.1rem}
.item-fld{margin-bottom:.9rem}
.item-fld input{width:100%}
.add-grid{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); align-items:end}
.fld{display:flex; flex-direction:column; gap:.45rem}
.fld label{
  font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.12em;
  color:var(--muted); text-transform:uppercase;
}
.add-btn{align-self:end; justify-self:start}

/* ---------- Cart list ---------- */
.list-head{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem}
.list-head h2{display:flex; align-items:center; gap:.55rem}
.pill{
  font-family:"JetBrains Mono",monospace; font-size:.78rem; font-weight:600;
  color:var(--accent-deep); border-radius:999px; padding:.18rem .7rem;
  background:var(--bg); box-shadow:var(--press-sm);
}
.rows{display:flex; flex-direction:column; gap:.85rem}
.row{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.8rem 1rem; border-radius:var(--r-md);
  background:var(--bg); box-shadow:var(--raise-sm);
  transition:box-shadow .2s; animation:rowIn .35s ease;
}
.row.bought{box-shadow:var(--press-sm); opacity:.75}
.row.bought .r-name{text-decoration:line-through}
.row .chk{
  appearance:none; -webkit-appearance:none;
  width:24px; height:24px; border-radius:8px; flex:none; cursor:pointer;
  background:var(--bg); box-shadow:var(--press-sm); position:relative; transition:box-shadow .18s;
}
.row .chk:checked{box-shadow:var(--raise-sm)}
.row .chk:checked::after{
  content:""; position:absolute; left:8px; top:4px; width:6px; height:11px;
  border:solid var(--accent); border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
.dot{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--raise-sm);
}
.r-main{flex:1; min-width:120px}
.r-name{font-weight:600; font-size:.98rem}
.r-cat{font-size:.72rem; color:var(--muted); margin-top:.1rem}
.r-edit-wrap{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:flex-end}
.r-qty,.r-price{
  width:64px; text-align:right; border:none; border-radius:10px; padding:.42rem .55rem;
  background:var(--bg); box-shadow:var(--press-sm);
  font-family:"JetBrains Mono",monospace; font-size:.85rem;
}
.r-price{width:72px}
.r-unit{font-size:.74rem; color:var(--muted); min-width:30px}
.r-line{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:.95rem; min-width:70px; text-align:right; color:var(--accent-deep)}
.r-edit,.r-del{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; background:var(--bg); border-radius:10px; width:34px; height:34px;
  cursor:pointer; flex:none; box-shadow:var(--raise-sm); transition:box-shadow .15s, transform .12s;
}
.r-edit{color:var(--accent-deep)}
.r-del{color:var(--danger)}
.r-edit:active,.r-del:active{transform:scale(.93); box-shadow:var(--press-sm)}

/* ---- Inline full-edit row ---- */
.row.editing{align-items:flex-start; gap:.85rem}
.r-edit-form{flex:1; display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); align-items:end; min-width:0}
.edit-fld{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.edit-fld.grow{grid-column:1/-1}
.edit-fld label{font-family:"JetBrains Mono",monospace; font-size:.54rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.edit-fld input,.edit-fld select{width:100%; font-size:.88rem; padding:.55rem .7rem}
.r-edit-actions{display:flex; gap:.5rem; align-self:center}
.r-save,.r-cancel{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:10px; width:38px; height:38px; cursor:pointer; flex:none;
  background:var(--bg); box-shadow:var(--raise-sm); transition:box-shadow .15s, transform .12s;
}
.r-save{color:#fff; background:linear-gradient(135deg,#67ab7c,#4c8a60)}
.r-cancel{color:var(--muted)}
.r-save:active,.r-cancel:active{transform:scale(.93); box-shadow:var(--press-sm)}

.empty{
  text-align:center; color:var(--faint); padding:2.6rem 1rem;
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:1.1rem;
}
.totals{
  display:flex; justify-content:space-between; align-items:center; margin-top:1.3rem;
  padding:1.1rem 1.25rem; border-radius:var(--r-md);
  background:var(--bg); box-shadow:var(--press);
}
.totals-label{font-size:.95rem; color:var(--accent-deep); font-weight:500; display:flex; align-items:center; gap:.5rem}
.cart-ic{display:flex}
.totals strong{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:1.65rem; color:var(--accent-deep); animation:pop .35s ease}

/* ---------- KPIs ---------- */
.kpi-grid{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:1.3rem}
.kpi{
  display:flex; flex-direction:column; gap:.3rem; border-radius:var(--r-md); padding:1.2rem 1.3rem;
  background:var(--bg); box-shadow:var(--raise);
}
.kpi-label{font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase}
.kpi strong{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:1.7rem}
.kpi-green .kpi-label{color:var(--accent-deep)} .kpi-green strong{color:var(--accent-deep)}
.kpi-amber .kpi-label{color:#b3742f} .kpi-amber strong{color:#c2702c}
.kpi-blue .kpi-label{color:#3a6e96} .kpi-blue strong{color:#3a7fb0}
.kpi-purple .kpi-label{color:#7a5aa6} .kpi-purple strong{color:#855bbf}

/* ---------- Suggestions ---------- */
.sug-card h2{margin-bottom:1rem}
.sug-list{display:flex; flex-direction:column; gap:.75rem}
.sug{
  display:flex; gap:.65rem; align-items:flex-start; border-radius:var(--r-sm); padding:.85rem 1rem;
  background:var(--bg); box-shadow:var(--press-sm); font-size:.9rem;
}
.sug .sug-ic{flex:none; display:flex}
.sug.good{color:var(--accent-deep)}
.sug.warn{color:#b3742f}

/* ---------- Insights (suggestions + chart takeaways) ---------- */
.insights-card{display:grid; grid-template-columns:1fr; gap:1.4rem}
.insights-col h2{margin-bottom:.85rem}
.takeaway-list{display:flex; flex-direction:column; gap:.6rem}
.takeaway{
  display:flex; gap:.65rem; align-items:flex-start; border-radius:var(--r-sm); padding:.7rem .9rem;
  background:var(--bg); box-shadow:var(--press-sm);
}
.takeaway .tk-ic{flex:none; display:flex; margin-top:.05rem}
.takeaway .tk-body{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.tk-label{font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.tk-text{font-size:.9rem; color:var(--text)}
.muted-takeaway{color:var(--faint); font-style:italic; box-shadow:none}

/* ---------- Hero · month-on-month ---------- */
.hero-card{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(90,156,110,.10), transparent 60%),
    var(--bg);
}
.hero-top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem}
.hero-meta{display:flex; flex-direction:column; gap:.15rem}
.hero-month{font-size:1.5rem; color:var(--text); line-height:1.15}
.hero-sub{font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.04em; color:var(--muted)}
.hero-amount-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:.1rem}
.hero-amount-cap{font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.hero-amount{font-size:2.3rem; font-weight:600; color:var(--accent-deep); line-height:1}
.hero-body{display:grid; grid-template-columns:1fr; gap:1.1rem}
.hero-chart-box{height:210px; min-width:0}
.hero-deltas{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.delta-card{
  display:flex; flex-direction:column; gap:.25rem; padding:.85rem 1rem;
  border-radius:var(--r-sm); background:var(--bg); box-shadow:var(--press-sm);
}
.delta-cap{font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.delta-val{font-family:"JetBrains Mono",monospace; font-size:1.35rem; font-weight:600; line-height:1}
.delta-sub{font-family:"JetBrains Mono",monospace; font-size:.74rem; color:var(--muted)}
.delta-card.up .delta-val{color:#c2702c}      /* spending more — caution */
.delta-card.down .delta-val{color:var(--accent-deep)}  /* spending less — win */
.delta-card.flat .delta-val,.delta-card.flat .delta-sub{color:var(--muted)}
.hero-empty{
  margin:.4rem 0 0; text-align:center; color:var(--faint);
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:1.05rem;
}

/* ---------- Charts ---------- */
.chart-grid{display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.chart-grid .wide{grid-column:1/-1}
.chart-note{margin:.15rem 0 .7rem; font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.04em; color:var(--muted)}
.chart-box{height:230px; min-width:0}
/* Canvases are sized manually (responsive:false); clamp them so a stale width
   attribute can never push its grid track wider than the column. */
.chart-box canvas,.hero-chart-box canvas{display:block; max-width:100%}

/* ---------- Desktop: pack the dashboard into one view ---------- */
@media(min-width:1000px){
  .dash .card,.dash .kpi-grid,.dash .chart-grid{margin-bottom:1rem}
  .dash .chart-grid{margin-bottom:0}
  .dash .card{padding:1.1rem 1.3rem}
  .dash .hero-top{margin-bottom:.8rem}
  .dash .hero-body{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); align-items:stretch}
  .dash .hero-chart-box{height:188px}
  .dash .hero-deltas{grid-template-columns:1fr; align-content:center; gap:.7rem}
  .dash .insights-card{grid-template-columns:1fr 1fr; gap:1.6rem}
  .dash .insights-col h2{margin-bottom:.6rem}
  .dash .sug,.dash .takeaway{padding:.55rem .8rem}
  .dash .sug{font-size:.82rem}
  .dash .sug-list,.dash .takeaway-list{gap:.5rem}
  .dash .kpi-grid{gap:.8rem}
  .dash .kpi{padding:.75rem 1rem}
  .dash .kpi strong{font-size:1.3rem}
  .dash .chart-grid{gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr))}
  .dash .chart-box{height:152px}
  .dash .chart-note{margin:.1rem 0 .5rem}
}

/* ---------- Saved ---------- */
.saved-row{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  padding:1rem 1.15rem; border-radius:var(--r-md);
  background:var(--bg); box-shadow:var(--raise-sm); animation:rowIn .35s ease;
}
.saved-row strong{font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:1.12rem}
.saved-row .meta{font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--muted); margin-top:.15rem}
.saved-actions{display:flex; gap:.55rem}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(1.4rem + env(safe-area-inset-bottom));
  transform:translate(-50%,160%);
  background:#3a4a3f; color:#eef3ea;
  padding:.7rem 1.3rem; border-radius:999px; font-size:.9rem; font-weight:500;
  box-shadow:0 10px 30px rgba(58,74,63,.4); z-index:50; pointer-events:none; opacity:0;
}
.toast.show{opacity:1; animation:toastIn .3s ease forwards}

/* ---------- Mobile ---------- */
@media(max-width:560px){
  .cur-actions{width:100%}
  .cur-actions input{max-width:none}
  .r-unit{min-width:0}
  .r-edit-wrap{width:100%; justify-content:space-between}
}