/* Saved & Calm · pots: jars, list, detail, entries. */

.page-head--row { grid-template-columns: 1fr auto; align-items: end; gap: var(--s-3); }
@media (max-width: 560px) { .page-head--row { grid-template-columns: 1fr; } .page-head--row .btn { justify-self: start; } }
.starter-chips--center { justify-content: center; margin: 0 0 var(--s-2); }
.chip-btn--solid { border-style: solid; background: var(--surface); color: var(--ink); }
.chip-btn--solid:hover { background: var(--accent-wash); }
.quick-amounts { margin-top: var(--s-2); }
.quick-amounts .chip-btn { min-height: 44px; padding: 0 var(--s-4); font-size: 1rem; }

/* ── Jar ───────────────────────────────────────────── */
.jar { width: 84px; height: auto; flex: none; overflow: visible; }
.jar--lg { width: min(180px, 42vw); }
.jar__glass { fill: color-mix(in srgb, var(--surface) 70%, var(--jar-fill) 8%); }
.jar__outline { fill: none; stroke: color-mix(in srgb, var(--jar-deep) 55%, var(--line-strong)); stroke-width: 3; }
.jar__shine { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .55; }
.jar__lid { fill: var(--jar-deep); }
.jar__lid-rim { fill: color-mix(in srgb, var(--jar-deep) 70%, #000); }
.jar__wave path { animation: wave 3.2s linear infinite; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(60px); } }
.jar.is-full .jar__lid { fill: var(--gold); }

/* ── List ──────────────────────────────────────────── */
.pot-grid { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 620px) { .pot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .pot-grid { grid-template-columns: repeat(3, 1fr); } }
.pot-grid li { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.pot-card {
  display: flex; align-items: center; gap: var(--s-4); height: 100%;
  padding: var(--s-4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.pot-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pot-card__body { display: grid; gap: 2px; min-width: 0; }
.pot-card__name { font-weight: 550; }
.pot-card__amount {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: 1.7rem; font-weight: 650; line-height: 1.1; color: var(--accent-strong);
}
.pot-card small { color: var(--ink-soft); }
.pot-plan { margin-top: var(--s-1); font-size: var(--step--1); color: var(--gold-ink); }
.pot-plan--done { color: var(--accent-strong); font-weight: 550; }

/* ── Detail ────────────────────────────────────────── */
.pot-hero {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center;
  padding: var(--s-5); border-radius: var(--r-lg);
  background:
    radial-gradient(80% 100% at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
@media (max-width: 560px) {
  .pot-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pot-hero .btn-row { justify-content: center; }
  .pot-hero__top { justify-content: center; }
}
.pot-hero__info { min-width: 0; display: grid; gap: var(--s-1); }
.pot-hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pot-hero__top h1 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
.pot-big {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: clamp(2.4rem, 10vw, 3.4rem); font-weight: 650; line-height: 1; letter-spacing: -.02em;
  color: var(--accent-strong); margin-top: var(--s-2);
}
.pot-hero .btn-row { margin-top: var(--s-3); }

.helper {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r);
  background: var(--gold-wash); color: var(--ink);
}
.helper > span { font-size: 1.4rem; }
.helper p { flex: 1 1 220px; }
.helper small { display: block; margin-top: 2px; color: var(--ink-soft); }
.helper__amount { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.3em; color: var(--gold-ink); }
.helper--done { background: var(--accent-wash); }

.entries { margin-top: var(--s-4); }
.entries__month { margin: var(--s-4) 0 var(--s-1); font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.entries .rows li { border-top: 1px solid var(--line); }
.entries .rows li:first-child { border-top: 0; }
.entry {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  min-height: 56px; padding: var(--s-2) 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.entry:hover .entry__text { color: var(--accent-strong); }
.entry__icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px;
  background: var(--accent-wash); color: var(--accent-strong); font-weight: 700;
}
.entry__icon.is-out { background: var(--surface-2); color: var(--ink-soft); }
.entry__text { flex: 1; display: grid; min-width: 0; }
.entry__text small { color: var(--ink-faint); font-size: var(--step--1); }
.entry__amount { font-variant-numeric: tabular-nums; font-weight: 550; color: var(--accent-strong); }
.entry__amount.is-out { color: var(--ink-soft); }

/* ── Pot form colours ──────────────────────────────── */
.colour-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.colour-opt { position: relative; cursor: pointer; }
.colour-opt input { position: absolute; opacity: 0; pointer-events: none; }
.colour-opt span:first-of-type {
  display: block; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(160deg, var(--c), var(--d)); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--line-strong);
}
.colour-opt input:checked + span { box-shadow: 0 0 0 3px var(--accent); }
.colour-opt input:focus-visible + span { box-shadow: var(--ring); }

.cash-tag { font-size: .72rem; padding: 1px 8px; border-radius: var(--r-pill); background: var(--gold-wash); color: var(--gold-ink); white-space: nowrap; }
.method-chips { margin: var(--s-2) 0 var(--s-1); }

/* ── Envelope wallet ───────────────────────────────── */
.wallet { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 620px) { .wallet { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .wallet { grid-template-columns: repeat(3, 1fr); } }
.envelope {
  position: relative; overflow: hidden; border-radius: 16px;
  background: color-mix(in srgb, var(--env) 30%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--env-deep) 35%, var(--line));
  box-shadow: var(--shadow-1);
}
/* The flap: a soft triangle across the top, like a real cash envelope */
.envelope__flap {
  height: 58px;
  background: linear-gradient(to bottom right, transparent 49.5%, color-mix(in srgb, var(--env) 70%, var(--surface)) 50%) left / 50% 100% no-repeat,
              linear-gradient(to bottom left, transparent 49.5%, color-mix(in srgb, var(--env) 70%, var(--surface)) 50%) right / 50% 100% no-repeat;
  transform: scaleY(-1);
  border-bottom: 1px dashed color-mix(in srgb, var(--env-deep) 30%, transparent);
}
.envelope__body { display: grid; gap: 4px; padding: var(--s-2) var(--s-4) var(--s-4); }
.envelope__name { color: var(--ink); font-weight: 600; text-decoration: none; }
.envelope__name:hover { text-decoration: underline; }
.envelope__cash { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 2rem; font-weight: 650; line-height: 1.1; color: var(--accent-strong); }
.envelope__cash small { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: var(--ink-soft); }
.envelope__meta { font-size: var(--step--1); color: var(--ink-soft); }
.envelope__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.row a.wallet-link { min-height: 0; display: inline; color: var(--ink); font-weight: 500; text-decoration: none; }
.row a.wallet-link:hover { text-decoration: underline; }