/* Saved & Calm · theme packs, cell shapes, monthly looks, cover, photos and Pip. */

/* ── Pattern layers ────────────────────────────────── */
.has-pattern { position: relative; isolation: isolate; }
.has-pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; background-image: var(--pack-pattern, none); background-size: 44px 44px;
}
.ch-hero.has-pattern { overflow: hidden; }
.ch-card.has-pattern::before { opacity: .55; }

/* ── Shaped cells ──────────────────────────────────── */
.cell--shaped { border: 0; background: transparent; overflow: visible; }
.cell--shaped:hover { border: 0; }
.cell__shape { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); z-index: 0; overflow: visible; }
.cell__shape-fill {
  fill: color-mix(in srgb, var(--surface) 82%, transparent);
  stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke;
  transition: fill .25s, stroke .2s;
}
.cell__shape-line { fill: none; stroke: var(--line-strong); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .7; }
.cell--shaped > :not(.cell__shape) { position: relative; z-index: 1; }
.cell--shaped:hover .cell__shape-fill { stroke: var(--accent); }
.cell--shaped.is-filled { background: transparent; }
.cell--shaped.is-filled .cell__shape-fill { fill: var(--cell); stroke: color-mix(in srgb, var(--cell) 70%, #000); stroke-dasharray: none; stroke-width: 1.5; }
.cell--shaped.is-filled .cell__shape-line { stroke: rgba(0, 0, 0, .25); }
.cell--shaped.is-locked { opacity: .5; }
.cell--shaped.is-next { border: 0; box-shadow: none; }
.cell--shaped.is-next .cell__shape-fill { stroke: var(--gold); stroke-dasharray: none; stroke-width: 3; }
.cell--heart .cell__n, .cell--star .cell__n { margin-top: -6px; }
.cell--heart .cell__amt, .cell--star .cell__amt { font-size: .6rem; }
.cell--envelope .cell__n { margin-top: 10px; }
.cell--shaped .cell__tick { top: 0; right: 2px; }

/* ── 12-Month themes ───────────────────────────────── */
.month--themed .month__head {
  margin: calc(var(--s-3) * -1) calc(var(--s-4) * -1) var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r) var(--r) 0 0;
  background: var(--month-pattern), color-mix(in srgb, var(--month-fill) 55%, var(--surface));
  background-size: 36px 36px, auto;
}

/* ── Picker: theme packs + shapes ──────────────────── */
.pack-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.pack-opt { position: relative; cursor: pointer; }
.pack-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pack-opt__body {
  display: grid; justify-items: center; gap: 6px; height: 100%; padding: var(--s-2) var(--s-2) var(--s-3);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); text-align: center;
}
.pack-opt__body b { font-size: var(--step--1); font-weight: 550; }
.pack-opt__body small { font-size: .72rem; color: var(--ink-soft); }
.pack-opt input:checked + .pack-opt__body { border-color: var(--accent); background: var(--accent-wash); }
.pack-opt input:focus-visible + .pack-opt__body { box-shadow: var(--ring); }
.pack-swatch {
  position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  width: 100%; height: 46px; padding: 6px; border-radius: 10px; overflow: hidden;
  background: var(--pack-pattern, none), var(--surface-2); background-size: 30px 30px, auto;
}
.pack-swatch i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.pack-swatch--default { align-items: center; font-size: 1.4rem; background: var(--surface-2); }

.shape-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.shape-opt { position: relative; cursor: pointer; }
.shape-opt input { position: absolute; opacity: 0; pointer-events: none; }
.shape-opt > span {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.shape-opt > span small { font-size: .62rem; line-height: 1.1; text-align: center; color: var(--ink-soft); padding: 0 4px; }
.shape-opt .cell__shape { inset: 10px; width: 36px; height: 36px; }
.shape-opt .cell__shape-fill { fill: var(--fill-1); stroke: var(--line-strong); stroke-dasharray: none; stroke-width: 1.5; }
.shape-opt__square { display: block; width: 32px; height: 32px; border-radius: 9px; background: var(--fill-1); border: 1.5px solid var(--line-strong); }
.shape-opt input:checked + span { border-color: var(--accent); background: var(--accent-wash); }
.shape-opt input:focus-visible + span { box-shadow: var(--ring); }

/* ── Personal cover ────────────────────────────────── */
.cover {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin: var(--s-2) 0 var(--s-5); padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  background: linear-gradient(120deg, color-mix(in srgb, var(--fill-1) 55%, var(--surface)), color-mix(in srgb, var(--fill-2) 45%, var(--surface)));
}
.cover::before { opacity: .9; }
.cover__avatar {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-1); font-size: 2rem;
}
.cover__text { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; }
.cover__text h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
.cover__actions { display: flex; align-items: center; gap: var(--s-2); }
.cover__actions .icon-btn { background: var(--surface); }

/* ── "Saving for" photo in a ring ──────────────────── */
.photo-ring { position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); flex: none; }
.photo-ring .ring { position: absolute; inset: 0; }
.photo-ring__img {
  position: absolute; inset: 12%; border-radius: 50%;
  background-size: cover; background-position: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.photo-ring__pct {
  position: absolute; bottom: 4%; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--shadow-1); font-size: .72rem; font-weight: 650;
}
.ch-hero.has-photo .ch-hero__photo { float: right; margin: 0 0 var(--s-2) var(--s-3); }
@media (max-width: 520px) { .ch-hero.has-photo .ch-hero__photo { float: none; display: flex; justify-content: center; margin: 0 0 var(--s-3); } }
.pot-hero__jar .photo-ring { margin: 0 auto; }

/* ── Pip ───────────────────────────────────────────── */
.pip { display: block; overflow: visible; }
.empty__pip { display: block; animation: pip-bob 3.6s ease-in-out infinite; }
.hero-pip { position: absolute; right: var(--s-4); top: 18px; animation: pip-bob 3.6s ease-in-out infinite; }
.card--hero:has(.hero-pip) .eyebrow, .card--hero:has(.hero-pip) .hero-title { padding-right: 92px; }
.settings-pip { display: flex !important; align-items: center; gap: var(--s-3); }
.settings-pip > span { display: grid; }
@keyframes pip-bob { 50% { transform: translateY(-4px); } }

.pip-pop {
  position: fixed; z-index: 70; right: var(--s-4);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 76px);
  display: flex; align-items: flex-end; gap: var(--s-2); pointer-events: none;
  animation: pip-in .35s var(--ease) both;
}
@media (min-width: 900px) { .pip-pop { bottom: var(--s-6); right: var(--s-6); } }
.pip-pop.is-leaving { opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.pip-pop__bubble {
  max-width: 190px; margin-bottom: 46px; padding: 8px 12px; border-radius: 16px 16px 4px 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  font-size: var(--step--1); font-weight: 500;
}
.pip-pop__pig { position: relative; display: block; animation: pip-wiggle .7s ease-in-out .35s 2; transform-origin: 50% 90%; }
.pip-pop__coin {
  position: absolute; left: 50%; top: -30px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE7A0, var(--gold) 60%, #B8891F);
  box-shadow: 0 0 0 2px #C99A2E inset; animation: coin-drop .45s ease-in both; z-index: 2;
}
.pip-pop--big .pip-pop__bubble { font-size: var(--step-0); }
@keyframes pip-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pip-wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes coin-drop { 0% { transform: translateY(-20px); opacity: 0; } 30% { opacity: 1; } 85% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(34px) scale(.5); opacity: 0; } }
/* The leaf's vein would run through the number, so it's left off */
.cell--leaf .cell__shape-line { display: none; }