/* Base styles: colours, page frame, cards, form fields, buttons,
   category dots and colour swatches. Shared by every page. */

:root{
  --ink:#12201d;
  --paper:#f6f4ee;
  --paper-2:#eeece2;
  --line:#d9d5c6;
  --pine:#123832;
  --pine-2:#1f5347;
  --gold:#c98a3a;
  --rust:#a6452f;
  --muted:#6d7a75;
  --white:#ffffff;
  --radius:14px;
  font-variant-numeric: tabular-nums;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  overscroll-behavior-y:none;
  /* Flex column spanning the true visual viewport. This — not
     position:fixed — is what pins the bottom nav to the real bottom edge
     on iOS home-screen apps: fixed elements are notoriously unreliable
     there because Safari's standalone mode miscalculates the viewport,
     leaving a gap under anything anchored with bottom:0. A flex column
     with the nav as a normal last item can't leave that gap. */
  display:flex;
  flex-direction:column;
  /* --app-h is the measured window height (set from script). iOS
     home-screen apps can report 100vh/100dvh wrongly, which left a band
     of empty space under the nav; the measured value doesn't. */
  height:100vh;
  height:var(--app-h, 100dvh);
  overflow:hidden;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-0.01em;}
.app{
  max-width:520px; margin:0 auto; padding:0 16px; width:100%;
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
}

section.view{display:none; padding-top:14px;}
section.view.active{display:block;}

/* card */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:14px;
}

/* add form */
label{display:block; font-size:12px; color:var(--muted); margin:12px 0 5px; font-weight:600;}
label:first-child{margin-top:0;}
input[type=text], input[type=number], input[type=password], select, textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:16px; background:var(--paper); color:var(--ink); font-family:inherit;
}
input[type=date]{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:16px; background:var(--paper); color:var(--ink); font-family:inherit;
  /* iOS renders its own date "chip" inside the field, which can overflow a
     tightly-padded box and appear to overlap the border. Giving it a
     comfortable, explicit height and line-height stops that. */
  min-height:46px; line-height:1.3; -webkit-appearance:none; appearance:none;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--pine-2); outline-offset:1px;}
.amount-row{display:flex; align-items:center; gap:8px;}
.amount-row span{font-size:20px; color:var(--muted);}
.amount-row input{font-size:22px; font-weight:700;}

.cat-grid{display:flex; flex-wrap:wrap; gap:7px; margin-top:6px;}
.cat-chip{
  padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--paper);
  font-size:13px; font-weight:600; color:var(--ink);
}
.cat-chip.active{background:var(--pine); border-color:var(--pine); color:var(--white);}

.primary-btn{
  width:100%; padding:14px; margin-top:16px; border:none; border-radius:12px;
  background:var(--pine); color:var(--white); font-size:16px; font-weight:700;
}
.primary-btn:disabled{opacity:.5;}
.ghost-btn{
  width:100%; padding:12px; margin-top:8px; border:1px solid var(--line); border-radius:12px;
  background:transparent; color:var(--rust); font-size:14px; font-weight:600;
}
.link-btn{
  background:none; border:none; color:var(--pine-2); font-size:13.5px; font-weight:600;
  padding:6px 0; margin-top:2px;
}

/* press feedback so taps feel registered */
.expense-row{transition:background-color .12s;}
.filter-chip, .cat-chip, .primary-btn{transition:transform .12s;}
.expense-row:active{background:var(--paper-2);}
.primary-btn:active, .cat-chip:active, .filter-chip:active{transform:scale(.97);}
label.check-row{
  display:flex; align-items:center; gap:9px; margin:16px 0 0;
  font-size:14.5px; font-weight:600; color:var(--ink);
}
label.check-row input{width:19px; height:19px; accent-color:var(--pine); flex-shrink:0;}
.empty-state{padding:30px 0; text-align:center; color:var(--muted); font-size:14px;}

/* Category colour: --cat is set per row; text always stays in ink. */
.cat-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--cat, var(--muted)); margin-right:6px; vertical-align:baseline; flex-shrink:0;}
.cat-chip .cat-dot{margin-right:5px;}
.bar-top .cat{display:inline-flex; align-items:center;}
.cat-chip.active .cat-dot{box-shadow:0 0 0 1.5px var(--white);}
.swatch-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;}
.swatch{width:30px; height:30px; border-radius:50%; border:none; background:var(--cat); cursor:pointer; box-shadow:0 0 0 2px var(--paper);}
.swatch.active{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);}

.setup-warning{background:#fdf3e7; border:1px solid var(--gold); border-radius:12px; padding:14px; font-size:13.5px; line-height:1.5; margin-top:14px;}
.setup-warning code{background:#f1e5d0; padding:1px 5px; border-radius:4px; font-size:12.5px;}