/* ==========================================================================
   MONEY — shared styling for Life Vault > Money and My Rhythm > Money Rhythm.
   ONE stylesheet on purpose: the two views must not drift apart visually.

   Class names deliberately avoid the -card / -tile / -tag / -pill / -badge
   suffixes, each of which is claimed by a global rule in this file that forces
   its own background, radius and colour.

   Calm, not banking: white canvas, soft borders, sage and navy, one weight of
   emphasis, no dense charts and no red.
   ========================================================================== */
#page-money, #page-money-rhythm{
  background:#ffffff !important;
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
}
#page-money .mny-wrap, #page-money-rhythm .mny-wrap{
  max-width:1080px; margin:0 auto; padding:18px clamp(16px,4vw,28px) 72px;
}

/* ---- shared primitives --------------------------------------------------- */
.mny-back{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  background:#fff !important; border:1px solid #DDD7C9 !important; border-radius:999px;
  padding:10px 18px; font:inherit; font-size:.86rem; font-weight:700; cursor:pointer;
  color:#3D4A3A !important; -webkit-text-fill-color:#3D4A3A !important;
}
.mny-back:hover{ background:#EEF4EC !important; }
.mny-eb{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 5px; color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
.mny-h{
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:clamp(1.4rem,3vw,1.9rem) !important; font-weight:800 !important;
  line-height:1.2; margin:0 0 6px !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.mny-sub{
  margin:0 0 18px; font-size:.94rem; line-height:1.6; max-width:60ch;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
.mny-sech{
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:1.02rem !important; font-weight:800 !important; margin:0 !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.mny-secsub{ margin:3px 0 0; font-size:.85rem; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
/* A GLOBAL `section { padding:52px 24px }` rule in this file applies to every
   <section> on the page, which was opening 52px craters between each block here.
   Reset it for our own sections only — the padding we want lives on .mny-panel. */
#page-money .mny-wrap section, #page-money-rhythm .mny-wrap section,
#monMount, #monMount section, #mryMount, #mryMount section{
  padding:0 !important;
}
.mny-sec{ margin:22px 0 0; }
.mny-sechrow{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 12px; }

.mny-panel{
  background:#fff !important; border:1px solid #E4E9E0 !important; border-radius:20px;
  padding:18px clamp(14px,3vw,20px);
}
.mny-panel.is-sage{ background:#F5F9F3 !important; border-color:#DCE7D7 !important; }
.mny-panel.is-cream{ background:#FBF8F2 !important; border-color:#EAE2D3 !important; }

.mny-b{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; padding:11px 18px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:800; text-align:center;
  background:#fff !important; border:1px solid #DDD7C9 !important;
  color:#3D4A3A !important; -webkit-text-fill-color:#3D4A3A !important;
}
.mny-b:hover{ background:#EEF4EC !important; border-color:#CFE0C8 !important; }
.mny-b.is-primary{
  background:#4E6640 !important; border-color:#4E6640 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.mny-b.is-primary:hover{ background:#445A38 !important; border-color:#445A38 !important; }
.mny-b:focus-visible, .mny-back:focus-visible, .mny-ch:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
.mny-b[disabled]{ opacity:.55; cursor:default; }
.mny-acts{ display:flex; gap:9px; flex-wrap:wrap; }

.mny-link{
  background:none !important; border:0 !important; padding:10px 0; min-height:44px;
  font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; text-align:left;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
.mny-link:hover{ text-decoration:underline; }

/* segmented switch (Today / Week / Month, Me / Household) */
.mny-seg{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:#F2F5F0 !important; border:1px solid #E1E8DD !important; flex-wrap:wrap;
}
.mny-ch{
  min-height:44px; padding:11px 17px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.85rem; font-weight:700; border:1px solid transparent !important;
  background:transparent !important;
  color:#4C5560 !important; -webkit-text-fill-color:#4C5560 !important;
}
.mny-ch[aria-pressed="true"]{
  background:#fff !important; border-color:#D3E0CD !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  box-shadow:0 1px 3px rgba(36,52,71,.07);
}

/* the three-figure summary — the shape of the whole feature */
.mny-figs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mny-fig{
  background:#fff !important; border:1px solid #E4E9E0 !important; border-radius:16px;
  padding:14px 14px 13px; min-width:0;
}
.mny-fig-l{
  display:block; font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#5E6A54 !important; -webkit-text-fill-color:#5E6A54 !important;
}
.mny-fig-v{
  display:block; margin:7px 0 0; font-size:clamp(1.05rem,2.6vw,1.4rem); font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.mny-fig-m{ display:block; margin:3px 0 0; font-size:.78rem; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.mny-bar{ display:block; height:7px; border-radius:99px; background:#EDF1EA !important; margin:9px 0 0; overflow:hidden; }
.mny-fill{ display:block; height:100%; border-radius:99px; background:#7D9E77 !important; background-image:none !important; }
.mny-fill.is-over{ background:#C4913F !important; }

/* rows: transactions, payments, categories */
.mny-rows{ display:flex; flex-direction:column; gap:8px; }
.mny-row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:#fff !important; border:1px solid #E4E9E0 !important; border-radius:14px;
  padding:12px 14px; min-height:56px; font:inherit; cursor:default;
}
button.mny-row{ cursor:pointer; }
button.mny-row:hover{ border-color:#CFE0C8 !important; background:#FAFCF9 !important; }
.mny-row-ic{
  flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#EEF4EC !important; font-size:1rem;
}
.mny-row-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mny-row-n{ font-size:.92rem; font-weight:700; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.mny-row-m{ font-size:.8rem; line-height:1.45; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.mny-row-a{ flex:none; font-size:.95rem; font-weight:800; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.mny-row-x{
  flex:none; width:44px; height:44px; min-height:44px; border-radius:50%; cursor:pointer;
  background:#fff !important; border:1px solid #E4E9E0 !important; font:inherit; font-size:.9rem;
  color:#5F6773 !important; -webkit-text-fill-color:#5F6773 !important;
}
.mny-row-x:hover{ background:#F4F6F1 !important; }

/* a small note under a figure or panel */
.mny-note{
  margin:12px 0 0; font-size:.8rem; line-height:1.6;
  color:#5F6773 !important; -webkit-text-fill-color:#5F6773 !important;
}
.mny-empty{
  margin:0; padding:22px 18px; text-align:center; border-radius:16px;
  border:1px dashed #D8DFD4 !important; background:#FBFCFA !important;
  font-size:.9rem; line-height:1.6; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
/* the "where this comes from" strip both views carry */
.mny-src{
  margin:20px 0 0; padding:14px 16px; border-radius:16px;
  background:#F7F9F5 !important; border:1px solid #E4EBE0 !important;
  font-size:.8rem; line-height:1.65; color:#4E5A49 !important; -webkit-text-fill-color:#4E5A49 !important;
}
.mny-src strong{ color:#243447 !important; -webkit-text-fill-color:#243447 !important; }

/* status words — the word carries the meaning, colour only reinforces it */
.mny-st{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.04em;
  padding:3px 9px; border-radius:99px;
  background:#EEF2EC !important; color:#43503C !important; -webkit-text-fill-color:#43503C !important;
}
.mny-st.is-soon{ background:#FBF1DD !important; color:#7A5A18 !important; -webkit-text-fill-color:#7A5A18 !important; }
.mny-st.is-over{ background:#F8ECEE !important; color:#8A4152 !important; -webkit-text-fill-color:#8A4152 !important; }

/* insights */
.mny-ins{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.mny-in{
  background:#FBF8F2 !important; border:1px solid #EAE2D3 !important; border-radius:16px;
  padding:14px 16px; font-size:.88rem; line-height:1.6;
  color:#3F4A55 !important; -webkit-text-fill-color:#3F4A55 !important;
}
.mny-in.is-good{ background:#F2F8EF !important; border-color:#DCE9D6 !important; }
.mny-in.is-warm{ background:#FBF4E8 !important; border-color:#EEE0C6 !important; }

/* category rhythm */
.mny-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.mny-cat{
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit;
  background:#fff !important; border:1px solid #E4E9E0 !important; border-radius:16px; padding:14px 16px;
}
.mny-cat:hover{ border-color:#CFE0C8 !important; background:#FAFCF9 !important; }
.mny-cat-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mny-cat-n{ font-size:.9rem; font-weight:800; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.mny-cat-v{ font-size:.85rem; font-weight:700; color:#4E5A49 !important; -webkit-text-fill-color:#4E5A49 !important; }
.mny-cat-m{ display:block; margin:7px 0 0; font-size:.76rem; color:#5F6773 !important; -webkit-text-fill-color:#5F6773 !important; }

/* no-spend week strip */
.mny-week{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.mny-day{
  border-radius:12px; padding:10px 4px; text-align:center; min-width:0;
  border:1px solid #E4E9E0 !important; background:#fff !important;
}
.mny-day.is-free{ background:#EDF4EA !important; border-color:#D5E4CF !important; }
.mny-day.is-spend{ background:#FBF8F2 !important; border-color:#EAE2D3 !important; }
.mny-day.is-future{ border-style:dashed !important; background:#FCFCFB !important; }
.mny-day-d{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#5E6A54 !important; -webkit-text-fill-color:#5E6A54 !important; }
.mny-day-v{ display:block; margin:5px 0 0; font-size:.78rem; font-weight:700;
  color:#3F4A55 !important; -webkit-text-fill-color:#3F4A55 !important; }

/* the hub's destination grid */
.mny-dest{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.mny-d{
  display:flex; flex-direction:column; gap:5px; width:100%; text-align:left; cursor:pointer; font:inherit;
  background:#fff !important; border:1px solid #E4E9E0 !important; border-radius:18px; padding:16px 18px; min-height:104px;
}
.mny-d:hover{ border-color:#CFE0C8 !important; background:#FAFCF9 !important; }
.mny-d-n{ font-size:.95rem; font-weight:800; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.mny-d-m{ font-size:.82rem; line-height:1.55; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.mny-d-f{ margin-top:auto; padding-top:8px; font-size:.78rem; font-weight:700;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important; }

/* the sheet both views use for Add Spend, budget editing and capture */
.mny-sheet{
  position:fixed; inset:0; z-index:9200; display:none;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(28,34,28,.42);
}
.mny-sheet.is-open{ display:flex; }
.mny-box{
  width:100%; max-width:520px; max-height:calc(100dvh - 40px); overflow-y:auto;
  background:#fff !important; border-radius:22px; padding:20px clamp(16px,4vw,22px) 22px;
  box-shadow:0 24px 60px rgba(28,34,28,.24);
}
.mny-box-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin:0 0 4px; }
.mny-box-t{
  font-family:'Nunito',system-ui,sans-serif !important; font-size:1.15rem !important; font-weight:800 !important;
  margin:0 !important; color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.mny-box-x{
  flex:none; width:44px; height:44px; min-height:44px; border-radius:50%; cursor:pointer; font:inherit; font-size:1.05rem;
  background:#F4F6F1 !important; border:1px solid #E4E9E0 !important;
  color:#3D4A3A !important; -webkit-text-fill-color:#3D4A3A !important;
}
.mny-box-i{ margin:0 0 14px; font-size:.86rem; line-height:1.6; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.mny-f{ display:block; margin:0 0 13px; }
.mny-f-l{
  display:block; margin:0 0 5px; font-size:.78rem; font-weight:800; letter-spacing:.03em;
  color:#3F4A55 !important; -webkit-text-fill-color:#3F4A55 !important;
}
.mny-i{
  width:100%; box-sizing:border-box; min-height:46px; padding:11px 14px; border-radius:13px; font:inherit; font-size:.92rem;
  background:#fff !important; border:1px solid #DDE3D8 !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.mny-i:focus{ outline:none; border-color:#7D9E77 !important; box-shadow:0 0 0 3px rgba(125,158,119,.2); }
textarea.mny-i{ min-height:76px; resize:vertical; }
.mny-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.mny-chips .mny-ch{
  border:1px solid #DDE3D8 !important; background:#fff !important; min-height:44px; padding:11px 14px; font-size:.82rem;
}
/* the compact secondary action used inside rows — narrower, never shorter than
   the 44px tap target */
.mny-b.is-inrow{ min-height:44px; padding:10px 14px; font-size:.78rem; }
.mny-chips .mny-ch[aria-pressed="true"]{
  background:#EEF4EC !important; border-color:#A9C4A2 !important;
  color:#33452C !important; -webkit-text-fill-color:#33452C !important;
}
.mny-box-f{ display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap; margin:18px 0 0; }
.mny-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:9400;
  background:#243447 !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  padding:13px 20px; border-radius:999px; font-family:'Nunito',system-ui,sans-serif; font-size:.87rem; font-weight:700;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:calc(100vw - 32px); text-align:center;
}
.mny-toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---- the entry cards that live on other pages --------------------------- */
/* Life Vault landing */
#monMount{ margin:20px 0 0; }
#monMount .mny-cta{
  background:#fff !important; border:1px solid #E4E9E0 !important; border-radius:20px; padding:18px clamp(14px,3vw,20px);
}
/* My Rhythm — the Money Rhythm overview card */
#mryMount{ margin:14px 0 0; }
#mryMount .mry-c{
  background:#fff !important; border:1px solid #E4E9E0 !important; border-radius:20px;
  padding:18px clamp(14px,3vw,20px); font-family:'Nunito',system-ui,sans-serif;
}
#mryMount .mry-c-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#mryMount .mry-c-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:14px 0 0; padding:12px 0 0; border-top:1px solid #EDF1EA;
}

/* sticky Add Spend on phones — recording a spend must never need Life Vault */
/* #mobBottomNav is 68px tall and fixed at z-index 2000, so the sticky action
   clears it rather than hiding behind it. */
.mry-stick{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(82px + env(safe-area-inset-bottom,0px));
  z-index:1900; display:none;
  box-shadow:0 10px 26px rgba(36,52,71,.22);
}
@media (max-width:760px){
  #page-money-rhythm.active .mry-stick{ display:inline-flex; }
  #page-money-rhythm .mny-wrap{ padding-bottom:180px; }
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:620px){
  .mny-figs{ grid-template-columns:1fr; }
  .mny-week{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mny-acts .mny-b{ flex:1 1 auto; }
  .mny-box{ max-width:none; }
}
@media (max-width:430px){
  .mny-row{ flex-wrap:wrap; }
  .mny-row-a{ width:100%; text-align:right; }
}