/* Leo's Finances — warm, refined, quiet. Paper-and-ink, single green accent. */

@font-face { font-family:'Fraunces'; src:url('/vendor/fonts/fraunces-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('/vendor/fonts/fraunces-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('/vendor/fonts/fraunces-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('/vendor/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('/vendor/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('/vendor/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root {
  --paper:#F4F0E7;
  --card:#FFFFFF;
  --ink:#29251F;
  --muted:#8C857A;
  --green:#2E6B4F;
  --green-dark:#234f3b;
  --teal:#3E8E7E;
  --save-tint:#E7F0EA;
  --teal-tint:#E5F0EC;
  --track:#EAE4D7;
  --line:rgba(41,37,31,0.09);
  --line-strong:rgba(41,37,31,0.16);
  --amber:#B8791F;
  --amber-tint:#F6ECD8;
  --down:#B23B2C;
  --down-tint:#F6E4E1;

  /* legacy aliases so older inline references keep working */
  --paper-2:var(--track);
  --ink-soft:var(--muted);
  --ink-faint:var(--muted);
  --green-soft:var(--save-tint);
  --clay:var(--teal);
  --gold:var(--amber);
  --danger:var(--down);

  --radius:14px;
  --radius-sm:10px;
  --display:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  --maxw:980px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  font-size:16px;
}
a { color:var(--green); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:inherit; cursor:pointer; }
h1,h2,h3 { font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.01em; color:var(--ink); }
.num { font-family:var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.ic { display:inline-block; vertical-align:-.18em; flex:none; }

/* ---- App layout: sidebar + content ---- */
.layout { display:flex; min-height:100vh; align-items:stretch; }
.sidebar {
  width:236px; flex:none; background:var(--card); border-right:1px solid var(--line);
  padding:1.4rem 1rem; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:.25rem;
}
.sidebar .brand {
  display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:700;
  font-size:1.18rem; color:var(--ink); padding:.2rem .5rem 1.1rem;
}
.sidebar .brand .ic { color:var(--green); }
.navlink {
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:.62rem .75rem; border:0; background:transparent; border-radius:11px;
  color:var(--muted); font-weight:500; font-size:.95rem;
  transition:background .15s, color .15s;
}
.navlink:hover { background:var(--paper); color:var(--ink); }
.navlink.active { background:var(--green); color:#fff; }
.sidebar .spacer { flex:1; }
.sidebar .foot { color:var(--muted); font-size:.78rem; padding:.4rem .6rem; }

.content { flex:1; min-width:0; }
main { max-width:var(--maxw); margin:0 auto; padding:2.1rem 2.1rem 4.5rem; }
.screen { animation:rise .4s cubic-bezier(.2,.7,.2,1) both; }
.screen > * { animation:rise .45s cubic-bezier(.2,.7,.2,1) both; }
.screen > *:nth-child(2){ animation-delay:.04s } .screen > *:nth-child(3){ animation-delay:.08s }
.screen > *:nth-child(4){ animation-delay:.12s } .screen > *:nth-child(5){ animation-delay:.16s }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.page-title { font-size:1.5rem; margin-bottom:.15rem; }
.page-sub { color:var(--muted); margin-bottom:1.1rem; font-size:.95rem; }
.eyebrow { color:var(--green); font-weight:600; font-size:.82rem; letter-spacing:.01em; }

/* ---- Greeting banner ---- */
.greet { position:relative; overflow:hidden; background:var(--green); color:#fff; border-radius:18px; padding:1.7rem 1.9rem; margin-bottom:1.5rem; }
.greet .flow { position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.greet-inner { position:relative; z-index:1; }
.greet h1 { color:#fff; font-size:1.7rem; margin-bottom:.12rem; }
.greet p { color:rgba(255,255,255,.82); font-size:.95rem; }

/* ---- Cards & grid ---- */
.grid { display:grid; gap:1rem; }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){ .grid.cols-2,.grid.cols-3,.grid.cols-4 { grid-template-columns:1fr; } .grid.cols-4.keep-2,.grid.cols-3.keep-2 { grid-template-columns:1fr 1fr; } }

.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.15rem 1.2rem; }
.card.tap { transition:transform .15s, border-color .15s; cursor:pointer; }
.card.tap:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.card h3 { font-size:1.05rem; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem; }

.stat-label { color:var(--muted); font-size:.82rem; letter-spacing:.01em; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.stat-label .ic { color:var(--muted); }
.stat-value { font-family:var(--display); font-size:2rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em; margin-top:.25rem; }
.stat-value.lg { font-size:2.5rem; }
.stat-foot { color:var(--muted); font-size:.85rem; margin-top:.35rem; }
.pos { color:var(--green); } .neg { color:var(--down); } .warn { color:var(--amber); }

/* ---- Lists / rows ---- */
.row { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-top:1px solid var(--line); }
.row:first-of-type { border-top:0; }
.row .grow { flex:1; min-width:0; }
.row .title { font-weight:500; }
.row .meta { color:var(--muted); font-size:.83rem; }
.row .amount { font-family:var(--display); font-variant-numeric:tabular-nums; font-weight:600; }
.muted { color:var(--muted); }
.strike .title, .strike .amount { text-decoration:line-through; color:var(--muted); }

/* ---- Check toggle ---- */
.check { width:24px; height:24px; border-radius:7px; border:2px solid var(--line-strong); display:grid; place-items:center; background:var(--card); flex:none; transition:all .15s; color:#fff; }
.check[aria-pressed="true"] { background:var(--green); border-color:var(--green); }
.check svg { width:14px; height:14px; opacity:0; transition:opacity .15s; }
.check[aria-pressed="true"] svg { opacity:1; }

/* ---- Buttons ---- */
.btn { border:1px solid var(--line-strong); background:var(--card); color:var(--ink); padding:.6rem 1rem; border-radius:11px; font-weight:600; font-size:.92rem; transition:all .15s; display:inline-flex; align-items:center; gap:.45rem; }
.btn:hover { border-color:var(--muted); }
.btn.primary { background:var(--green); color:#fff; border-color:var(--green); }
.btn.primary:hover { background:var(--green-dark); border-color:var(--green-dark); }
.btn.green { background:var(--green); color:#fff; border-color:var(--green); }
.btn.green:hover { background:var(--green-dark); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--green); padding:.4rem .5rem; }
.btn.danger { color:var(--down); border-color:transparent; background:transparent; padding:.4rem .5rem; }
.btn.sm { padding:.42rem .72rem; font-size:.85rem; border-radius:9px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-row { display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---- Forms ---- */
label.field { display:block; margin-bottom:.85rem; }
label.field span { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.3rem; font-weight:500; }
input,select,textarea { width:100%; font-family:inherit; font-size:1rem; color:var(--ink); background:var(--card); border:1px solid var(--line-strong); border-radius:10px; padding:.65rem .8rem; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--save-tint); }
.inline-form { display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-end; }
.input-prefix { position:relative; }
.input-prefix input { padding-left:1.6rem; }
.input-prefix::before { content:'£'; position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--muted); }

/* ---- Progress ---- */
.progress { height:12px; border-radius:999px; background:var(--track); overflow:hidden; }
.progress > span { display:block; height:100%; background:var(--green); border-radius:999px; transition:width .6s cubic-bezier(.2,.7,.2,1); }

/* ---- Pills ---- */
.pill { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600; padding:.22rem .6rem; border-radius:8px; background:var(--track); color:var(--ink); }
.pill.green { background:var(--save-tint); color:var(--green-dark); }
.pill.clay { background:var(--teal-tint); color:#2c6256; }
.pill.amber { background:var(--amber-tint); color:#7d5414; }

/* ---- Payday countdown ---- */
.countdown { text-align:center; padding:1.6rem 1rem; }
.countdown .big { font-family:var(--display); font-size:4rem; font-weight:700; line-height:1; color:var(--green); font-variant-numeric:tabular-nums; }
.countdown .unit { color:var(--muted); font-size:1rem; margin-top:.3rem; }
.countdown .when { margin-top:.5rem; color:var(--ink); font-weight:500; }

.empty { text-align:center; color:var(--muted); padding:1.4rem .5rem; font-size:.95rem; }
.spinner { width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; margin:3rem auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- Auth: full-bleed split with curved green art panel ---- */
.auth-split { display:flex; min-height:100vh; }
.auth-art { flex:0 0 44%; background:var(--green); color:#fff; position:relative; overflow:hidden; border-radius:0 60px 60px 0; padding:3rem; display:flex; flex-direction:column; justify-content:center; }
.auth-art .flow { position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.auth-art .mark { position:relative; z-index:1; }
.auth-art .piggy { width:56px; height:56px; margin-bottom:1.2rem; }
.auth-art .wordmark { font-family:var(--display); font-weight:700; font-size:2rem; line-height:1.1; }
.auth-art .tagline { color:rgba(255,255,255,.82); margin-top:.6rem; font-size:1.02rem; max-width:22rem; }
.auth-form { flex:1; display:grid; place-items:center; padding:2rem 1.5rem; }
.auth-card { width:100%; max-width:400px; }
.auth-card .eyebrow { display:block; margin-bottom:.2rem; }
.auth-card h2 { font-size:1.5rem; }
.auth-tag { color:var(--muted); margin-bottom:1.4rem; }
.qr { display:block; margin:1rem auto; border-radius:12px; border:1px solid var(--line); }
.secret-code { font-family:ui-monospace,monospace; background:var(--track); padding:.5rem .7rem; border-radius:9px; word-break:break-all; font-size:.9rem; text-align:center; }
.error-msg { color:var(--down); font-size:.9rem; margin-top:.3rem; min-height:1.1rem; }
.ok-msg { color:var(--green); font-size:.9rem; margin-top:.3rem; }

.chart-box { position:relative; height:240px; }
.chart-box.sm { height:200px; }

/* ---- Modal & toast ---- */
.modal-bg { position:fixed; inset:0; background:rgba(41,37,31,.42); display:grid; place-items:center; z-index:50; padding:1rem; animation:fade .2s; }
@keyframes fade { from { opacity:0; } }
.modal { width:100%; max-width:460px; max-height:90vh; overflow:auto; }
#toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%) translateY(2rem); opacity:0; background:var(--ink); color:var(--paper); padding:.7rem 1.1rem; border-radius:12px; font-size:.9rem; z-index:60; transition:all .25s; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Responsive: sidebar collapses to a top bar ---- */
@media (max-width:860px){
  .layout { flex-direction:column; }
  .sidebar {
    width:auto; height:auto; position:sticky; top:0; z-index:30;
    flex-direction:row; align-items:center; gap:.2rem;
    border-right:0; border-bottom:1px solid var(--line);
    padding:.55rem .7rem; overflow-x:auto;
    background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px);
  }
  .sidebar .brand { padding:.2rem .5rem; margin-right:.4rem; font-size:1.05rem; white-space:nowrap; }
  .sidebar .brand .label { display:none; }
  .navlink { width:auto; padding:.5rem .7rem; white-space:nowrap; }
  .sidebar .spacer, .sidebar .foot { display:none; }
  main { padding:1.3rem 1rem 4rem; }
  .stat-value.lg { font-size:2.1rem; }
  .countdown .big { font-size:3.2rem; }
}
@media (max-width:820px){
  .auth-split { flex-direction:column; }
  .auth-art { flex:none; border-radius:0 0 36px 36px; padding:2.4rem 1.6rem; }
  .auth-art .piggy { width:44px; height:44px; margin-bottom:.8rem; }
  .auth-art .wordmark { font-size:1.6rem; }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }