/* Baby Names — warm keepsake styling, phone-first, big tap targets. */
[hidden]{display:none!important}
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#faf6f1;
  --card:#ffffff;
  --ink:#32262b;
  --soft:#7a6670;
  --faint:#9c7f8b;
  --accent:#a3556e;
  --accent-dark:#8a4259;
  --berry:#8a4259;
  --green:#5a8a5a;
  --green-dark:#487048;
  --danger:#b04434;
  --line:#ead9de;
  --gold:#fdf6e0;
  --gold-line:#e8d48c;
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
}
body.busy button{opacity:.55;pointer-events:none}
.screen{min-height:100vh;min-height:100dvh}

/* lock + who screens */
#lock,#who{display:flex;align-items:center;justify-content:center;padding:2rem}
.lock-card{width:100%;max-width:340px;text-align:center}
.lock-icon{border-radius:18px;margin-bottom:1rem}
.lock-card h1{font-size:1.9rem;margin-bottom:.4rem}
.lock-sub{color:var(--soft);margin-bottom:1.4rem;line-height:1.45}
#pw{
  width:100%;font-size:1.1rem;padding:.9rem 1rem;border:1.5px solid var(--line);
  border-radius:14px;background:var(--card);margin-bottom:.9rem;
}
#pw:focus{outline:none;border-color:var(--accent)}
.err{color:var(--danger);margin-top:.8rem}

/* buttons */
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.primary{
  background:var(--accent);color:#fff;border:0;border-radius:14px;
  font-size:1.05rem;font-weight:600;padding:.85rem 1.6rem;min-height:48px;
}
.primary:active{background:var(--accent-dark)}
.primary.big{width:100%;padding:1.1rem;font-size:1.2rem;margin-bottom:.8rem}
.primary.big.alt{background:var(--green)}
.primary.big.alt:active{background:var(--green-dark)}
.ghost{
  background:none;border:1.5px solid var(--line);color:var(--soft);
  border-radius:14px;font-size:1rem;padding:.8rem 1.2rem;min-height:48px;
}
.lock-btn{
  background:none;border:1.5px solid var(--line);border-radius:999px;color:var(--soft);
  font-size:.95rem;padding:.55rem 1.1rem;min-height:44px;display:inline-flex;align-items:center;
}
.link-btn{background:none;border:0;color:var(--accent-dark);font-size:inherit;text-decoration:underline;padding:0}

/* app frame */
#app{max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top, 0px) + 2rem) 1.1rem 2.5rem}
.app-head{margin-bottom:.9rem}
.app-head h1{font-size:1.7rem;line-height:1.15}
.today{color:var(--soft);font-size:.95rem;margin-top:.25rem}
.sync-warn{
  margin:0 0 1rem;padding:.7rem .9rem;border-radius:12px;
  background:#fdf3e3;border:1.5px solid #e5c98c;color:#7a5a14;
  font-size:.92rem;line-height:1.4;
}

/* live search */
.search-wrap{position:relative;margin-bottom:1rem}
#search{
  width:100%;font-size:1.05rem;padding:.85rem 2.9rem .85rem 1rem;
  border:1.5px solid var(--line);border-radius:14px;background:var(--card);
  -webkit-appearance:none;appearance:none;
}
#search:focus{outline:none;border-color:var(--accent)}
#search::-webkit-search-cancel-button{display:none}
.search-clear{
  position:absolute;top:50%;right:.35rem;transform:translateY(-50%);
  width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:50%;
  font-size:1.55rem;line-height:1;color:var(--faint);
}
.search-meta{color:var(--soft);font-size:.92rem;text-align:center;margin:-.35rem 0 .95rem}
.search-none{color:var(--faint);text-align:center;font-size:1rem;margin:-.1rem 0 1.1rem}

/* tabs: review queue vs Contenders */
.tabs{
  display:flex;gap:.45rem;padding:.45rem;margin-bottom:1.2rem;
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;
}
.tab{
  flex:1;background:none;border:0;border-radius:11px;
  font-size:1.02rem;font-weight:600;color:var(--soft);
  padding:.8rem .5rem;min-height:48px;
}
.tab.active{background:var(--accent);color:#fff}
.tab.active:active{background:var(--accent-dark)}

/* bulk-add button + its report line */
#bulk-btn{background:var(--green)}
#bulk-btn:active{background:var(--green-dark)}
#bulk-btn:disabled{opacity:.55}
.bulk-msg{color:var(--green-dark);font-weight:600;text-align:center;margin:-.2rem 0 .9rem;font-size:.98rem}
.bulk-done{color:var(--faint);text-align:center;margin:-.2rem 0 .9rem;font-size:.95rem}

/* contender */
.contender{
  background:var(--gold);border:1.5px solid var(--gold-line);border-radius:18px;
  padding:1.2rem;margin-bottom:1.2rem;text-align:center;
}
.contender-tag{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#96792a;margin-bottom:.35rem}
.contender-name{font-family:Georgia,'Times New Roman',serif;font-size:1.65rem;font-weight:700;margin-bottom:.45rem}
.contender-note{color:var(--soft);font-size:.95rem;line-height:1.5}

/* every button answers the finger instantly: no tap delay, no grey
   flash, and a quick press-down so taps feel physical */
button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .07s ease,background-color .12s ease,border-color .12s ease,opacity .12s ease;
}
button:active{transform:scale(.95)}
.heart-btn:active{transform:scale(.8)}
.tab-btn:active,.keep-btn:active,.elim-btn:active{transform:scale(.97)}
button:disabled:active{transform:none}

/* controls row: Undo is a labeled berry pill, Refresh a plain round
   icon button — different shape, fill and content, unmistakable */
.controls-row{
  display:flex;justify-content:flex-end;align-items:center;
  gap:.5rem;margin:.55rem 0 .8rem;
}
.undo-btn{
  min-height:44px;padding:.55rem 1.35rem;border-radius:999px;
  border:2px solid var(--berry);background:var(--berry);color:#fff;
  font-size:1rem;font-weight:700;letter-spacing:.01em;
  box-shadow:0 3px 10px rgba(138,66,89,.35);
}
.undo-btn.ready{animation:undoPop .35s ease}
@keyframes undoPop{
  0%{transform:scale(.88)}
  55%{transform:scale(1.07)}
  100%{transform:scale(1)}
}
.undo-btn:disabled{
  background:var(--card);border-color:var(--line);color:var(--faint);
  font-weight:400;box-shadow:none;
}
.icon-btn{
  width:42px;height:42px;border-radius:50%;flex:none;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  font-size:1.18rem;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.icon-btn:disabled{opacity:.32}

/* the Add names drawer toggle under the deck */
.tools-toggle{
  display:block;width:100%;margin-top:1rem;min-height:46px;
  background:none;border:1.5px dashed var(--line);border-radius:12px;
  color:var(--soft);font-size:.95rem;
}
#add-tools{margin-top:.8rem}

/* identity line in the footer */
.foot-id{text-align:center;margin:1.6rem 0 0}
.foot-switch{
  background:none;border:none;color:var(--faint);font-size:.88rem;
  text-decoration:underline;text-underline-offset:3px;padding:.3rem .5rem;min-height:36px;
}

/* swipe deck */
.deck{position:relative;margin-top:.3rem}
.deck-card{
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  padding:1.9rem 1.4rem 1.6rem;box-shadow:0 3px 12px rgba(90,50,60,.08);
  min-height:350px;display:flex;flex-direction:column;justify-content:center;
}
.deck-card.behind{
  position:absolute;inset:0;transform:scale(.94) translateY(12px);
  opacity:.5;z-index:0;overflow:hidden;
}
.deck-card.top{
  position:relative;z-index:1;touch-action:none;user-select:none;
  -webkit-user-select:none;cursor:grab;
  will-change:transform;transform:translateZ(0);
  animation:promote .18s ease;
}
@keyframes promote{
  from{transform:scale(.94) translateY(12px)}
  to{transform:scale(1) translateY(0)}
}
.deck-card.top.dragging{
  cursor:grabbing;
  box-shadow:0 14px 34px rgba(90,50,60,.20);
}
.deck-name{font-size:2.45rem;margin:0 0 .2rem;color:var(--ink)}
.deck-stamp{
  position:absolute;top:1rem;z-index:3;pointer-events:none;opacity:0;
  font-weight:800;letter-spacing:.07em;font-size:.95rem;
  padding:.22rem .6rem;border:3px solid;border-radius:8px;
}
.deck-stamp.keep{left:1rem;color:var(--green);border-color:var(--green);transform:rotate(-10deg)}
.deck-stamp.nope{right:1rem;color:#9a4a3a;border-color:#9a4a3a;transform:rotate(10deg)}
.deck-actions{display:flex;gap:.6rem;justify-content:center;align-items:stretch;margin-top:.95rem}
.deck-actions .keep-btn,.deck-actions .elim-btn{
  min-height:52px;padding:.7rem 1.25rem;font-size:1rem;border-radius:999px;
}
.deck-heart{
  width:52px;height:52px;border-radius:50%;flex:none;
  border:1.5px solid var(--line);background:var(--card);
  color:var(--berry);font-size:1.45rem;line-height:1;
}
.deck-heart.on{background:#fbeef3;border-color:var(--berry)}
.deck-progress{text-align:center;color:var(--faint);font-size:.88rem;margin-top:.7rem}
.deck-note{text-align:center;color:var(--berry);font-size:.9rem;margin-top:.55rem}

/* long-list rendering: off-screen cards skip layout/paint entirely */
.name-card{content-visibility:auto;contain-intrinsic-size:auto 170px}

/* generate-by-prompt card */
.gen-head{font-weight:700;font-size:1.05rem;margin-bottom:.7rem}
#g-prompt{
  width:100%;font-size:1.05rem;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;margin-bottom:.8rem;
}
#g-prompt:focus{outline:none;border-color:var(--accent)}
#gen-btn{width:100%}
#gen-btn:disabled{opacity:.55}
#gen-card .bulk-msg{margin:.8rem 0 0}

/* add form */
.card{background:var(--card);border-radius:18px;padding:1.1rem;margin-bottom:1.2rem;box-shadow:0 1px 4px rgba(60,50,35,.07)}
#a-name,#a-meaning,#a-flow{
  width:100%;font-size:1.05rem;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;margin-bottom:.8rem;
}
#a-name:focus,#a-meaning:focus,#a-flow:focus{outline:none;border-color:var(--accent)}
.form-row{display:flex;gap:.7rem;margin-top:.4rem}
.form-row .primary{flex:1}

/* sections + name cards */
.sec-head{font-size:1.15rem;margin:1.5rem 0 .7rem}
.sec-head.muted{color:var(--faint)}
.group-head{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:1.1rem 0 .55rem}
.name-card{
  position:relative;
  background:var(--card);border-radius:16px;padding:1rem 1.05rem;margin-bottom:.65rem;
  box-shadow:0 1px 4px rgba(60,50,35,.06);
}
.name-card.keeper{border:1.5px solid #bcd4bc;background:#fbfefb}
.name-card.eliminated{opacity:.72}
.name-card.super{border:2px solid var(--berry);background:#fdf3f6;opacity:1;box-shadow:0 2px 10px rgba(138,66,89,.18)}
.super-badge{display:inline-block;margin-top:.35rem;padding:.18rem .6rem;border-radius:999px;background:var(--berry);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.01em}
.list-heading{margin:1rem 0 .5rem;font-weight:700;color:var(--berry);font-size:.95rem}
.list-heading:first-child{margin-top:0}

/* fun bits: love bursts and a poof for the eliminated */
/* heart lock-in (v30): the heart springs past its size with an
   overshoot and settles, a berry ring pulses outward, and tiny
   hearts/sparkles burst, drift down and fade. Un-hearting is just
   a small shrink as the heart drains back to an outline. When the
   tap makes a super contender, the ring runs gold and longer and
   the burst carries ⭐s. Transforms/opacity only. */
@keyframes heartLockIn{
  0%{transform:scale(.6)}
  38%{transform:scale(1.38)}
  58%{transform:scale(.92)}
  78%{transform:scale(1.1)}
  100%{transform:scale(1)}
}
.heart-btn.lock-in{animation:heartLockIn .42s cubic-bezier(.34,1.4,.64,1)}
@keyframes heartLockOut{
  0%{transform:scale(1.12)}
  45%{transform:scale(.76)}
  100%{transform:scale(1)}
}
.heart-btn.lock-out{animation:heartLockOut .28s ease}
.heart-ring{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:4;
  border:2.5px solid var(--berry);
  animation:heartRingOut .55s ease-out forwards;
}
.heart-ring.super{border-color:#cf9b2f;--ring-end:2.7;animation-duration:.95s}
.heart-ring.late{animation-delay:.14s}
@keyframes heartRingOut{
  0%{transform:scale(.55);opacity:.85}
  100%{transform:scale(var(--ring-end,2.05));opacity:0}
}
.heart-particle{
  position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;
  color:var(--berry);line-height:1;
  animation:heartParticle .8s ease-out forwards;
}
.heart-particle.star{color:#cf9b2f}
@keyframes heartParticle{
  0%{transform:translate(-50%,-50%) translate(0,0) scale(.5);opacity:1}
  62%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1.05);opacity:1}
  100%{transform:translate(-50%,-50%) translate(calc(var(--dx)*1.1),calc(var(--dy) + 22px)) scale(.85);opacity:0}
}
/* deck hearts: the tapped button is replaced by the next name's
   button on re-render, so the deck's show plays in a fixed overlay
   frozen at the tapped spot */
.heart-fx{position:fixed;z-index:60;pointer-events:none}
.heart-fx .fx-glyph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;color:var(--berry);
}
.heart-fx .fx-glyph.in{animation:heartLockIn .42s cubic-bezier(.34,1.4,.64,1)}
.heart-fx .fx-glyph.out{color:var(--faint);animation:heartLockOut .28s ease}
@keyframes glowPulse{
  0%{box-shadow:0 1px 4px rgba(60,50,35,.06)}
  35%{box-shadow:0 0 0 5px rgba(201,107,125,.28),0 2px 14px rgba(201,107,125,.35)}
  100%{box-shadow:0 1px 4px rgba(60,50,35,.06)}
}
.name-card.loved-glow{animation:glowPulse .8s ease}
.spark{
  position:absolute;top:.35rem;right:.55rem;z-index:3;pointer-events:none;
  color:var(--accent);font-size:.95rem;line-height:1;
  animation:sparkFly .75s ease-out forwards;
}
@keyframes sparkFly{
  0%{transform:translate(0,0) scale(.6);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.15);opacity:0}
}
@keyframes poof{
  25%{transform:scale(1.03)}
  100%{transform:scale(.8) rotate(-2.5deg) translateY(8px);opacity:0;filter:blur(1.5px)}
}
.name-card.leaving{animation:poof .22s ease-in forwards;pointer-events:none}
@keyframes keepCelebrate{
  0%{transform:scale(1) translateY(0)}
  30%{transform:scale(1.045) translateY(-6px);
      box-shadow:0 0 0 6px rgba(90,140,90,.28),0 10px 22px rgba(90,140,90,.32);
      border-color:var(--green)}
  55%{transform:scale(.985) translateY(0)}
  75%{transform:scale(1.02) translateY(-2px)}
  100%{transform:scale(1) translateY(0)}
}
.name-card.keeping{animation:keepCelebrate .38s ease}
.keep-stamp{
  position:absolute;top:.75rem;right:3.7rem;z-index:3;pointer-events:none;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;font-size:1.35rem;font-weight:700;
  box-shadow:0 3px 10px rgba(60,90,60,.4);
  animation:stampIn .34s cubic-bezier(.2,1.8,.4,1) forwards;
}
@keyframes stampIn{
  0%{transform:scale(2.9) rotate(-26deg);opacity:0}
  55%{transform:scale(.88) rotate(-6deg);opacity:1}
  78%{transform:scale(1.1) rotate(-9deg)}
  100%{transform:scale(1) rotate(-8deg);opacity:1}
}
.keep-ring{
  position:absolute;top:.75rem;right:3.7rem;z-index:2;pointer-events:none;
  width:40px;height:40px;border-radius:50%;
  border:3px solid var(--green);
  animation:ringOut .45s ease-out forwards;
}
@keyframes ringOut{
  0%{transform:scale(.5);opacity:.85}
  100%{transform:scale(2.1);opacity:0}
}
.spark.green{color:var(--green-dark)}
@media (prefers-reduced-motion: reduce){
  .name-card.loved-glow,.name-card.leaving,.name-card.keeping,.keep-stamp,.keep-ring{animation:none}
  .spark{display:none}
  /* heart taps: no ring, no burst, no overlay — only the colour
     change and one gentle scale tap */
  .heart-ring,.heart-particle,.heart-fx{display:none}
  .heart-btn.lock-in{animation:rmTap .18s ease}
  .heart-btn.lock-out{animation:none}
}
@keyframes rmTap{
  0%{transform:scale(1.14)}
  100%{transform:scale(1)}
}
.full-name{font-family:Georgia,'Times New Roman',serif;font-size:1.3rem;font-weight:700;line-height:1.25;padding-right:2.9rem}
.category{display:inline-block;color:var(--accent-dark);background:var(--accent-soft,#f3e3e0);border-radius:999px;padding:.12rem .6rem;font-size:.78rem;font-weight:600;letter-spacing:.02em;margin-top:.45rem}
.meaning{color:var(--ink);font-size:.98rem;margin-top:.3rem;line-height:1.45}
.flow{color:var(--soft);font-size:.93rem;margin-top:.2rem;line-height:1.45;font-style:italic}
.stamp{font-size:.88rem;font-weight:600;margin-top:.5rem}
.name-card.keeper .stamp{color:var(--green-dark)}
.name-card.eliminated .stamp{color:var(--danger)}
.added,.syl{color:var(--faint);font-size:.84rem;margin-top:.35rem}
.loved{color:var(--accent-dark);font-size:.9rem;font-weight:600;margin-top:.45rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.heart-btn{
  position:absolute;top:.45rem;right:.45rem;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:50%;
  font-size:1.4rem;line-height:1;color:var(--faint);
}
.heart-btn.on{color:var(--berry)}
.keep-btn{
  flex:1;background:var(--green);color:#fff;border:0;border-radius:12px;
  font-size:1.02rem;font-weight:600;padding:.8rem;min-height:48px;
}
.keep-btn:active{background:var(--green-dark)}
.keep-btn.small{flex:0 1 auto;padding:.8rem 1rem}
.elim-btn{
  flex:1;background:none;border:1.5px solid #e5b8ae;color:var(--danger);
  border-radius:12px;font-size:1.02rem;padding:.8rem;min-height:48px;
}
.elim-btn.locked{
  flex:1 1 100%;border-style:dashed;border-color:var(--line);
  color:var(--faint);font-weight:600;cursor:default;
}
.btn-row .ghost{flex:1}
.empty{color:var(--faint);text-align:center;margin:1.6rem 0;font-size:1rem}
.foot{color:var(--faint);text-align:center;margin-top:2.2rem;font-size:.9rem}