/* Real Life Money brand canon (LOCKED April 2026) -- do not substitute
   these hex values. Playfair Display for display type, Lora for body. */
:root{
  --green:#2B5E3F; --green-alt:#2D6A4A; --gold:#C9A440; --gold-light:#E4BB54;
  --sage:#7A8B75; --sage-light:#A8B9A3; --cream:#F7F3EB; --cream-dark:#EDE7D9;
  --charcoal:#2C2C2C; --charcoal-light:#4A4A4A; --espresso:#3E2918;
  --slate:#3D6289; --white:#FFFFFF;
  --bad:#a8452f;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream); color:var(--charcoal);
  font-family:'Lora',Georgia,serif; line-height:1.5;
  -webkit-font-smoothing:antialiased; padding:24px 20px 80px;
}
.wrap{max-width:1080px; margin:0 auto;}
header{
  position:relative; overflow:hidden; color:var(--white); text-align:left;
  min-height:184px; padding:24px 30px; border-radius:18px 18px 0 0;
  background:linear-gradient(135deg,#214c33 0%,var(--green) 62%,#357851 100%);
  box-shadow:0 18px 45px rgba(43,94,63,.16);
  display:grid; grid-template-columns:300px minmax(0,1fr); align-items:center; column-gap:34px;
}
header::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  right:-90px; top:-135px; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 38px rgba(255,255,255,.035),0 0 0 76px rgba(255,255,255,.025);
}
.brand-lockup{position:relative; z-index:2; display:flex; align-items:center; gap:10px; margin:0; padding-right:28px; border-right:1px solid rgba(255,255,255,.28);}
.brand-mark{
  display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--white);
  border-radius:50%; font-family:'Lora',Georgia,serif; font-size:.64rem; font-weight:700;
}
.brand-name{font-family:'Playfair Display',Georgia,serif; font-size:1.05rem; font-weight:700; line-height:1.05;}
.brand-name small{display:block; margin-top:4px; font-family:'Lora',Georgia,serif; font-size:.55rem; font-style:italic; font-weight:400; opacity:.82;}
.planner-heading{position:relative; z-index:2; max-width:620px;}
.planner-heading .eyebrow{font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#dce8d7; margin:0 0 5px;}
h1{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:2.15rem; color:var(--white); margin:0 0 4px; line-height:1.1;}
header .planner-heading>p:last-child{color:#eef3eb; margin:0; font-size:.92rem; max-width:620px;}
.dee-masthead{display:none; position:absolute; z-index:3; top:0; right:0; bottom:0; width:330px; pointer-events:none;}
.dee-masthead::before{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(43,94,63,0),rgba(33,76,51,.32));}
.dee-masthead img{
  position:absolute; height:250px; width:auto; object-fit:contain;
  right:155px; bottom:-46px; filter:drop-shadow(0 8px 15px rgba(15,44,27,.24));
}
.dee-masthead p{
  position:absolute; z-index:2; right:18px; bottom:40px; margin:0; color:var(--white);
  font-size:.72rem; line-height:1.2; white-space:nowrap; padding:7px 9px;
  border-radius:999px; background:rgba(33,76,51,.82); border:1px solid rgba(255,255,255,.25);
}
.dee-masthead strong{font-family:'Playfair Display',Georgia,serif; font-size:1rem;}
header.ask-dee-active .dee-masthead{display:block;}
header.ask-dee-active .planner-heading{max-width:330px;}
header.ask-dee-active{
  background-image:url('assets/ask-dee-approved-masthead.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
header.ask-dee-active::after{display:none;}
header.ask-dee-active>.brand-lockup,
header.ask-dee-active>.planner-heading,
header.ask-dee-active>.dee-masthead{visibility:hidden;}

#app,.gate{
  background:rgba(255,255,255,.74); border:1px solid rgba(168,185,163,.48);
  border-top:0; border-radius:0 0 18px 18px; padding:0 30px 34px;
  box-shadow:0 18px 45px rgba(62,41,24,.10);
}
.gate{padding-top:30px; text-align:center;}

.tabs{display:flex; gap:6px; margin:0 -30px 26px; padding:0 22px; border-bottom:1px solid var(--cream-dark); background:var(--white);}
.tab{
  flex:1; text-align:center; padding:12px 6px; cursor:pointer; font-size:.95rem;
  color:var(--charcoal-light); border-bottom:3px solid transparent; margin-bottom:-1px;
  font-weight:600; user-select:none; background:none; border-left:none; border-right:none; border-top:none;
  font-family:'Lora',Georgia,serif;
}
.tab.active{color:var(--green); border-bottom-color:var(--green);}

.page{display:none; animation:page-in .18s ease-out;}
.page.active{display:block;}
@keyframes page-in{from{opacity:.6; transform:translateY(2px)}to{opacity:1; transform:none}}

h2{font-family:'Playfair Display',Georgia,serif; color:var(--green); font-size:1.55rem; margin:0 0 4px;}
.sub{color:var(--charcoal-light); margin:0 0 20px; font-size:.92rem;}

table{width:100%; border-collapse:separate; border-spacing:0; margin-bottom:14px; background:rgba(255,255,255,.72); border:1px solid var(--cream-dark); border-radius:11px; overflow:hidden;}
th{
  text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--white); background:var(--green); font-weight:600; padding:10px 8px; border-bottom:0;
}
td{padding:8px; border-bottom:1px solid var(--cream-dark); vertical-align:middle;}
tbody tr:nth-child(even) td{background:rgba(247,243,235,.58);}
tbody tr:hover td{background:#f1eee4;}
tr:last-child td{border-bottom:none;}

input[type=text], input[type=number], input[type=date], select{
  font-family:'Lora',Georgia,serif; font-size:.95rem; color:var(--charcoal);
  border:1px solid transparent; background:transparent; border-radius:6px;
  padding:6px 8px; width:100%;
}
input[type=text]:hover, input[type=number]:hover, select:hover{border-color:var(--sage-light);}
input[type=text]:focus, input[type=number]:focus, select:focus{
  outline:none; border-color:var(--green); background:var(--white);
}
.amt-col{width:100px;}
.date-col{width:112px;}
.cad-col{width:120px;}
.pay-col{width:132px;}
.stat-col{width:100px;}
.del-col{width:34px; text-align:center;}
.bills-table-scroll{overflow-x:auto; margin-bottom:14px;}
#billsTable{
  --bill-name-width:162px;
  width:calc(var(--bill-name-width) + 598px); min-width:100%;
  table-layout:fixed; margin-bottom:0;
}
#billsTable .bill-name-col{width:var(--bill-name-width);}
#billsTable .bill-name-heading{position:relative;}
#billsTable .bill-name-resize-handle{
  position:absolute; top:0; right:-6px; bottom:0; width:12px;
  cursor:col-resize; touch-action:none; z-index:1;
}
#billsTable .bill-name-resize-handle::after{
  content:""; position:absolute; top:0; bottom:5px; left:5px; width:2px;
  background:transparent; border-radius:2px;
}
#billsTable .bill-name-resize-handle:hover::after,
#billsTable .bill-name-resize-handle:focus::after{
  background:var(--green);
}
#billsTable .bill-name-resize-handle:focus{outline:2px solid var(--green); outline-offset:1px;}
.hint{color:var(--sage); font-size:.82rem; font-style:italic; margin:-14px 0 18px;}
.confirm-counter{
  font-size:.78rem; letter-spacing:.04em; color:var(--sage); font-weight:600; margin:0 0 8px;
}
.tag{
  display:inline-block; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--sage); margin-top:2px;
}
.del-btn{
  background:none; border:none; color:var(--sage); cursor:pointer; font-size:1.1rem; line-height:1;
  padding:4px;
}
.del-btn:hover{color:var(--bad);}
.new-bill-row td{background:var(--cream-dark);}
.save-new-bill{
  background:none; border:none; color:var(--green); cursor:pointer; font-size:1.1rem;
  font-weight:700; line-height:1; padding:4px;
}
.save-new-bill:hover{color:var(--green-alt);}

.add-row{
  background:var(--green); border:1px solid var(--green); color:var(--white);
  font-family:'Lora',Georgia,serif; font-weight:600; font-size:.9rem;
  padding:10px 16px; border-radius:8px; cursor:pointer; width:auto; min-width:150px; margin-top:4px;
  box-shadow:0 5px 14px rgba(43,94,63,.16);
}
.add-row:hover{background:var(--green-alt);}

@media (max-width:700px){
  body{padding:0 0 60px;}
  header{border-radius:0; min-height:174px; padding:18px; display:block;}
  .brand-lockup{border:0; padding:0; margin-bottom:16px;}
  h1{font-size:2rem;}
  .planner-heading{max-width:76%;}
  header .planner-heading>p:last-child{font-size:.78rem; line-height:1.35;}
  .dee-masthead{width:150px;}
  .dee-masthead img{height:170px; width:auto; right:0; bottom:-28px;}
  .dee-masthead p{right:78px; bottom:8px; font-size:.56rem; padding:3px 6px;}
  .dee-masthead strong{font-size:.72rem;}
  header.ask-dee-active .planner-heading{max-width:61%;}
  header.ask-dee-active{background-size:auto 100%; background-position:center;}
  #app,.gate{border-radius:0; border-left:0; border-right:0; padding-left:16px; padding-right:16px;}
  .tabs{margin-left:-16px; margin-right:-16px; padding:0 6px; overflow-x:auto;}
  .tab{min-width:112px; font-size:.82rem;}
}

.period-row{display:flex; gap:14px; align-items:flex-end; margin-bottom:14px; flex-wrap:wrap;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); font-weight:600;}
.field input, .field select{border:1px solid var(--sage-light); background:var(--white);}
.field-btn{
  background:var(--green); color:var(--white); border:none; border-radius:8px;
  padding:9px 16px; font-family:'Lora',Georgia,serif; font-weight:600; font-size:.9rem; cursor:pointer;
}
.field-btn:hover{background:var(--green-alt);}
.field-btn.secondary{background:var(--white); color:var(--green); border:1px solid var(--green);}
.field-btn:disabled{opacity:.5; cursor:default;}

.period-picker{margin-bottom:20px; padding:14px 16px; background:var(--cream-dark); border-radius:12px;}
.period-picker select{border:1px solid var(--sage-light); background:var(--white); max-width:280px;}

.empty{color:var(--charcoal-light); font-style:italic; padding:18px 4px; font-size:.92rem;}

.clear-col{width:70px; text-align:center;}
.clear-col input[type=checkbox]{width:20px; height:20px; cursor:pointer;}
.skip-col{width:70px; text-align:center; font-size:.78rem;}

.summary{
  background:var(--cream-dark); border-radius:14px; padding:18px 20px; margin-top:22px;
}
.summary .line{display:flex; justify-content:space-between; padding:6px 0; font-size:1rem;}
.summary .line.hero{font-size:1.5rem; font-weight:700; font-family:'Playfair Display',Georgia,serif;}
.summary .line.hero.ok{color:var(--green);}
.summary .line.hero.warn{color:var(--bad);}
.summary .line span:last-child{font-weight:600;}

.warn-text{color:var(--bad); font-weight:700;}
th[data-sort-key]{cursor:pointer; user-select:none;}
th[data-sort-key]:hover{color:var(--white); background:var(--green-alt);}
.sort-arrow{font-size:.65rem; margin-left:2px;}

/* Sign-in gate */
.gate{max-width:420px; margin:60px auto; text-align:center;}
.gate p{color:var(--charcoal-light); margin:0 0 24px;}
.gate .signin-btn{
  display:inline-block; background:var(--green); color:var(--white); text-decoration:none;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.05rem;
  padding:14px 28px; border-radius:10px;
}
.gate .signin-btn:hover{background:var(--green-alt);}
.gate .error{color:var(--bad); font-size:.9rem; margin-top:18px;}

/* Ask Dee */
.dee-messages{
  display:flex; flex-direction:column; gap:10px; background:var(--white);
  border:1px solid var(--cream-dark); border-radius:12px; padding:14px;
  min-height:280px; max-height:60vh; overflow-y:auto; margin-bottom:12px;
}
.dee-msg{display:flex; gap:8px; align-items:flex-start;}
.dee-msg.user{justify-content:flex-end;}
.dee-avatar{
  width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 20%;
  border:2px solid var(--cream-dark); flex-shrink:0;
}
.dee-bubble{
  border-radius:12px 12px 12px 2px; padding:9px 12px; font-size:.92rem; line-height:1.5; max-width:82%;
  background:var(--cream-dark); color:var(--charcoal); white-space:pre-line;
}
.dee-msg.user .dee-bubble{
  border-radius:12px 12px 2px 12px; background:var(--green); color:var(--white);
}
.dee-photo-tag{display:block; font-size:.75rem; font-style:italic; opacity:.85; margin-top:4px;}
.dee-empty{color:var(--charcoal-light); font-style:italic; padding:18px 4px; font-size:.92rem;}
.dee-thinking{color:var(--sage); font-style:italic; font-size:.88rem; padding:0 4px;}
.dee-image-preview{
  display:flex; align-items:center; gap:10px; background:var(--cream-dark); border-radius:10px;
  padding:8px 12px; margin-bottom:10px;
}
.dee-image-preview img{width:44px; height:44px; object-fit:cover; border-radius:6px;}
.dee-image-name{font-size:.85rem; color:var(--charcoal-light); flex:1;}
.dee-composer{display:flex; gap:8px; align-items:center;}
.dee-composer input[type=text]{
  flex:1; border:1px solid var(--sage-light); background:var(--white); border-radius:8px; padding:9px 12px;
}
.dee-attach-btn{flex-shrink:0; padding:9px 14px; font-size:.85rem;}

/* Toast / banner */
#toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--charcoal); color:var(--white); padding:12px 20px; border-radius:10px;
  font-size:.9rem; max-width:90vw; display:none; z-index:100;
}
#toast.error{background:var(--bad);}
#toast.show{display:block;}