/* WishWell — the well at dusk.
   One idea carries the interface: a waiting wish holds water, and the water rises
   as the wait elapses. When it surfaces, the card turns to light. Everything else
   stays quiet so that one thing reads instantly on a phone. */

@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/Fraunces.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/static/fonts/Archivo.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --deep:    #0E2A2B;
  --card:    #16393A;
  --card-hi: #1D4749;
  --water:   #245E58;   /* deep enough that bone text stays legible on top of it */
  --bone:    #F2EDDF;
  --brass:   #E0A63F;
  --moss:    #86A9A0;
  --rose:    #C4736A;

  --edge: rgba(242, 237, 223, .09);
  --nav-h: 4.25rem;

  --display: 'Fraunces', Georgia, serif;
  --ui: 'Archivo', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--deep);
  color: var(--bone);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.5;
  /* the well is deeper at the bottom */
  background-image: radial-gradient(120% 60% at 50% 0%, #17393A 0%, var(--deep) 70%);
  background-attachment: fixed;
}

.shell {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.25rem 1.125rem calc(var(--nav-h) + 2.5rem);
}

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
h1 {
  font-size: 1.75rem;
  font-variation-settings: 'opsz' 120, 'SOFT' 40, 'WONK' 1;
  letter-spacing: -.01em;
}
h2 { font-size: 1.25rem; font-variation-settings: 'opsz' 60, 'SOFT' 30, 'WONK' 1; }

.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 2rem 0 .75rem;
}
.eyebrow:first-child { margin-top: 0; }

.muted { color: var(--moss); }
.small { font-size: .8125rem; }

/* ---------- top bar ---------- */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.wordmark {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-variation-settings: 'opsz' 20, 'SOFT' 60, 'WONK' 1;
  letter-spacing: .01em;
  color: var(--bone);
  text-decoration: none;
}
.wordmark b { color: var(--brass); font-weight: inherit; }
.whoami { font-size: .8125rem; color: var(--moss); text-decoration: none; }

/* ---------- the counter (page thesis) ---------- */

.counter {
  border: 1px solid var(--edge);
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  background: linear-gradient(180deg, rgba(224,166,63,.07), transparent);
}
.counter .label {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--moss);
}
.counter .amount {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 1;
  font-size: 3rem;
  line-height: 1.05;
  color: var(--brass);
  margin: .25rem 0 .125rem;
}
.counter .amount span { font-size: 1.125rem; color: var(--moss); margin-left: .25rem; }
.counter .note { font-size: .8125rem; color: var(--moss); }

/* ---------- wish cards ---------- */

.wish {
  position: relative;
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.125rem;
  margin-bottom: .625rem;
  border: 1px solid var(--edge);
  border-radius: .875rem;
  background: var(--card);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.wish > * { position: relative; z-index: 1; }

.water {
  position: absolute;
  z-index: 0;
  inset: auto 0 0 0;
  height: var(--fill, 0%);
  background: var(--water);
  animation: rise 1s cubic-bezier(.2, .75, .25, 1) both;
}
/* A meniscus, not a rule. A hard line lands wherever the wait happens to be and
   reads as a strikethrough when it crosses the title. */
.water::after {
  content: '';
  position: absolute;
  inset: -.75rem 0 auto 0;
  height: .75rem;
  background: linear-gradient(180deg, rgba(242, 237, 223, 0), rgba(242, 237, 223, .14));
}
@keyframes rise { from { height: 0; } }

.wish-body { flex: 1; min-width: 0; }
.wish-title {
  display: block;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* not --moss: this text can sit on the card or on the water, and has to hold up on both */
.wish-meta { display: block; font-size: .8125rem; color: rgba(242, 237, 223, .7); }

.wish-count { text-align: right; flex-shrink: 0; }
.wish-count b {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'opsz' 90, 'SOFT' 20, 'WONK' 1;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}
.wish-count small {
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--moss);
}

/* surfaced: the card comes into the light */
.wish.ready { color: var(--deep); border-color: transparent; }
.wish.ready .water { background: var(--bone); }
.wish.ready .wish-meta,
.wish.ready .wish-count small { color: #4A6B66; }
.wish.ready .wish-count b { color: var(--deep); }

.flag {
  display: inline-block;
  margin-top: .25rem;
  padding: .0625rem .375rem;
  border-radius: .25rem;
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(224, 166, 63, .16); color: var(--brass);
}
.wish.ready .flag { background: rgba(14, 42, 43, .12); color: #7A5A1E; }

/* ---------- goals ---------- */

.goal {
  border: 1px solid var(--edge);
  border-radius: .875rem;
  padding: 1.125rem;
  margin-bottom: .75rem;
  background: var(--card);
}
.goal.family { border-color: rgba(224, 166, 63, .3); }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.goal-name { font-family: var(--display); font-size: 1.125rem; font-variation-settings: 'opsz' 40, 'SOFT' 30, 'WONK' 1; }
.goal-num { font-family: var(--display); font-size: 1rem; color: var(--brass); white-space: nowrap; }
.bar { height: .5rem; border-radius: .25rem; background: var(--card-hi); margin: .75rem 0 .5rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brass); border-radius: .25rem; animation: fill 1s cubic-bezier(.2,.75,.25,1) both; }
@keyframes fill { from { width: 0 !important; } }

/* ---------- forms and buttons ---------- */

label { display: block; font-size: .8125rem; color: var(--moss); margin: 1rem 0 .375rem; }

input, select, textarea {
  width: 100%;
  padding: .75rem .875rem;
  border: 1px solid var(--edge);
  border-radius: .625rem;
  background: var(--card);
  color: var(--bone);
  font-family: var(--ui);
  font-size: 1rem;         /* 16px: stops iOS zooming the page on focus */
}
textarea { min-height: 4.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.btn {
  display: block; width: 100%;
  padding: .875rem 1rem;
  margin-top: 1.25rem;
  border: 0; border-radius: .625rem;
  background: var(--brass); color: var(--deep);
  font-family: var(--ui); font-size: 1rem; font-weight: 600;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.btn.ghost { background: transparent; border: 1px solid var(--edge); color: var(--bone); }
.btn.water-btn { background: var(--water); color: var(--bone); }
.btn.danger { background: transparent; border: 1px solid rgba(196,115,106,.5); color: var(--rose); }
.btn-row { display: flex; gap: .5rem; }
.btn-row .btn { margin-top: .75rem; }

.pinpad { font-family: var(--display); font-size: 1.75rem; letter-spacing: .5em; text-align: center; }

/* ---------- flash ---------- */

.flash {
  border: 1px solid rgba(224,166,63,.35);
  background: rgba(224,166,63,.09);
  border-radius: .625rem;
  padding: .75rem .875rem;
  margin-bottom: 1rem;
  font-size: .875rem;
}

/* ---------- verdict (add screen) ---------- */

.verdict {
  border-radius: .875rem;
  padding: 1.25rem;
  margin-top: 1.25rem;
  background: var(--card);
  border: 1px solid var(--edge);
}
.verdict .big {
  font-family: var(--display);
  font-variation-settings: 'opsz' 120, 'SOFT' 30, 'WONK' 1;
  font-size: 1.75rem; line-height: 1.15;
}

/* ---------- history ---------- */

.event { display: flex; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--edge); font-size: .875rem; }
.event time { color: var(--moss); font-size: .75rem; white-space: nowrap; min-width: 4.25rem; }

.stat-row { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--edge); }
.stat-row b { font-family: var(--display); color: var(--brass); font-weight: 600; white-space: nowrap; }
/* the rate a total is measured against sits under it, not beside it — beside it
   pushes the amount into a second line on a phone */
.stat-sub { display: block; margin-top: .125rem; }

/* ---------- empty ---------- */

.empty {
  border: 1px dashed var(--edge);
  border-radius: .875rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
  color: var(--moss);
  font-size: .875rem;
}

/* ---------- nav ---------- */

.nav {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: flex;
  max-width: 30rem; margin: 0 auto;
  background: rgba(14, 42, 43, .93);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--edge);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  flex: 1;
  padding: .75rem .25rem .625rem;
  text-align: center;
  color: var(--moss);
  text-decoration: none;
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
}
.nav a.on { color: var(--bone); }
.nav svg { display: block; margin: 0 auto .1875rem; width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.6; }
.nav a.on svg { stroke: var(--brass); }

.fab {
  position: fixed; z-index: 11;
  right: max(1.125rem, calc(50vw - 14rem));
  bottom: calc(var(--nav-h) + 1rem + env(safe-area-inset-bottom));
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--brass); color: var(--deep);
  border: 0;
  font-size: 1.75rem; line-height: 3.25rem; font-weight: 400;
  text-align: center; text-decoration: none;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
}

/* ---------- spending ---------- */

.over { color: var(--rose); }

.month-pick { display: flex; gap: .5rem; margin-bottom: .5rem; }
.month-pick select { flex: 1; }
.month-pick .btn { flex: none; width: auto; margin-top: 0; padding: .75rem 1rem; }

/* a tickbox is not a text field, and the blanket width above would stretch it
   across the screen */
.tick { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; }
.tick input[type="checkbox"] {
  flex: none; width: 1.0625rem; height: 1.0625rem;
  padding: 0; accent-color: var(--brass);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}