:root{color-scheme:light;--paper:#f7f2ea;--card:#fffdf9;--ink:#2d2022;--muted:#76696a;--wine:#7b2941;--soft:#f0dfe4;--line:#decfd0;--gold:#b88945;font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 85% 8%,#f0dfe4,transparent 28%),var(--paper);color:var(--ink);margin:0;min-height:100vh}main{margin:0 auto;max-width:760px;padding:45px 24px 70px}.brand{align-items:center;background:linear-gradient(145deg,#8c3650,#582035);border-radius:14px;color:white;display:flex;font-family:Georgia,serif;font-size:25px;height:50px;justify-content:center;width:50px}header{align-items:flex-start;display:grid;gap:20px;grid-template-columns:50px 1fr}.eyebrow,.number{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:1.8px;margin:0 0 10px;text-transform:uppercase}h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500}h1{font-size:43px;line-height:1.08;margin:0}h2{font-size:32px;line-height:1.15;margin:0}header p:not(.eyebrow),.state-card>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.6;margin:13px 0 0}.progress{background:#e8dcda;border-radius:99px;height:6px;margin-top:36px;overflow:hidden}.progress i{background:linear-gradient(90deg,var(--wine),#bd6d81);display:block;height:100%;transition:width .25s ease;width:20%}.progress-label{color:var(--muted);display:flex;font-size:12px;justify-content:space-between;letter-spacing:.5px;margin:8px 0 28px;text-transform:uppercase}.question{background:rgba(255,253,249,.9);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 55px rgba(73,39,47,.08);display:none;min-height:390px;padding:38px}.question.is-active{display:block}.hint,label span{color:var(--muted);display:block;font-size:13px;margin:9px 0 22px}.choices{display:grid;gap:10px;margin-top:25px}.choices.multi{grid-template-columns:1fr 1fr}.choices.single{grid-template-columns:1fr 1fr}.choices button{background:white;border:1px solid var(--line);border-radius:13px;color:var(--ink);cursor:pointer;font-size:14px;min-height:53px;padding:10px}.choices button.selected{background:var(--soft);border-color:var(--wine);box-shadow:inset 0 0 0 1px var(--wine);color:var(--wine);font-weight:700}textarea{background:white;border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;min-height:150px;padding:15px;resize:vertical;width:100%}textarea:focus,.choices button:focus-visible,footer button:focus-visible{outline:3px solid rgba(123,41,65,.28);outline-offset:2px}.form-error{color:#a52e3c;font-size:12px;min-height:17px}footer{display:flex;gap:12px;justify-content:space-between;margin-top:17px}footer button{border-radius:13px;cursor:pointer;font-weight:700;min-height:52px;padding:0 25px}.back{background:transparent;border:1px solid var(--line);color:var(--ink)}.next{background:var(--wine);border:0;color:white;min-width:150px}.back:disabled{opacity:.35}.state-card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 60px rgba(70,38,46,.09);margin:13vh auto 0;max-width:600px;padding:45px}.state-card h1{font-size:38px;margin-top:22px}.success .brand{box-shadow:0 0 0 8px var(--soft)}@media(max-width:600px){main{padding:28px 16px 55px}header{grid-template-columns:1fr}h1{font-size:34px}.question{min-height:430px;padding:26px 20px}.choices.multi,.choices.single{grid-template-columns:1fr}h2{font-size:28px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.together-note{background:var(--soft);border:1px solid var(--line);border-radius:14px;color:var(--ink);font-size:13px;line-height:1.5;margin:24px 0 -17px;padding:13px}
.state-card h1,header h1{overflow-wrap:anywhere}
footer button:disabled{cursor:wait;opacity:.58}
@media(max-width:600px){.state-card{margin-top:8vh;padding:28px}footer{flex-wrap:wrap}footer button{flex:1;min-width:120px}}
:root{--gold:#8f5d24}

/* Shortlist ranking. Deliberately plain: the recipient is doing us a favour on a phone they did
   not choose to install anything on, so nothing here needs to be clever. */
.rank-list { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; counter-reset: rank; }
.rank-item { counter-increment: rank; border: 1px solid var(--rule, #d9d5cc); border-radius: 10px; padding: 14px 16px; background: var(--surface, #fff); }
.rank-item::before { content: counter(rank); display: inline-block; font-weight: 600; min-width: 1.6em; opacity: 0.55; }
.rank-title { display: inline; margin: 0; font-weight: 600; font-size: 16px; }
.rank-note { margin: 6px 0 0; font-size: 14px; opacity: 0.75; }
.rank-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.rank-controls button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule, #d9d5cc); background: transparent; font: inherit; cursor: pointer; }
.rank-controls button:disabled { opacity: 0.4; cursor: default; }
.rank-controls select { min-height: 44px; border-radius: 10px; border: 1px solid var(--rule, #d9d5cc); padding: 0 10px; font: inherit; background: transparent; flex: 1 1 12ch; }
.rank-controls button:focus-visible, .rank-controls select:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.fine { font-size: 13px; opacity: 0.7; margin-top: 14px; }

/* The invite page: the code is the one thing the visitor needs to carry away. */
.invite-code { font-size: 28px; font-weight: 700; letter-spacing: 0.06em; margin: 8px 0 18px; overflow-wrap: anywhere; user-select: all; }
.store-link { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--wine); color: #fff; font-weight: 600; text-decoration: none; }
.store-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* A family list's names and budgets (15 October 2026). */
.giftee-list { list-style: none; margin: 8px 0 16px; padding: 0; }
.giftee-list li { border-bottom: 1px solid rgba(127, 127, 127, 0.25); font-size: 1.05rem; padding: 10px 0; }

/* "Add more detail" (17 October 2026): the optional boxes of a stage, folded under one line. */
.more{border:1px solid var(--line);border-radius:14px;margin-top:18px;padding:0 14px}
.more summary{cursor:pointer;font-weight:600;list-style:revert;min-height:44px;padding:12px 0}
.more summary span{color:var(--muted);font-weight:400}
.more summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.more-body{padding-bottom:12px}

/* The deletion page's buttons (25 October 2026) wear the store link's shape. */
button.store-link { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
button.store-link:disabled { cursor: wait; opacity: 0.58; }
button.store-link.danger { background: #a52e3c; }
/* A hidden store link or button stays hidden: `display: inline-block` above beat the `hidden` attribute, so the invite
   page showed an empty App Store link and the deletion page its Delete button before any sign-in (25 October 2026). */
.store-link[hidden] { display: none; }