/* Sign-up (2026-10-17, web/signup.html): the sign-up style (auth.css: the
   cream page with three soft blobs, one white card, step dots, Nunito
   title, full-width forest button) with edie talking on every step in her
   mint note, and the Polaroids from set-up (setup.css) for the household. */
.su-card { gap: 16px; }
.su-logo { width: 104px; height: 58px; }
/* Back: top-left corner, level with the logo, so nothing moves (Kathryn, 20 Oct, option 2) */
.su-card { position: relative; }
.su-back { position: absolute; left: 18px; top: 22px; margin: 0; z-index: 2; }
.su-say { display: flex; align-items: flex-start; gap: 10px; }
.su-face { flex: 0 0 auto; line-height: 0; margin-top: 2px; }
.su-note { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background-color: var(--mint); }
.su-note p { margin: 0; font: 400 15px/1.45 'Jost', sans-serif; color: var(--charcoal); animation: suIn 0.4s ease-out both; }
.su-note p:first-child { font-weight: 500; color: var(--forest); }
.su-ask { margin: 4px 0 -6px; font: 800 18px/1.2 'Nunito', sans-serif; color: var(--forest); text-align: center; }
.su-small { margin: -4px 0 0; font-size: 13px; text-align: center; }
.su-label { margin: 0; }

.welcome-choice { border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.welcome-choice.sky { background-color: var(--sky); border-radius: 46px 40px 52px 36px / 40px 48px 38px 46px; }
.welcome-choice-icon { color: #FFFFFF; }
.welcome-choice-icon.sky-ink { background-color: #4F86C6; }
.welcome-choice-icon .edie-doodle { stroke-width: 3.2; }

/* the household */
.setup-polaroid:disabled { cursor: default; opacity: 1; }
.su-adds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.su-adds .setup-add { padding: 10px 8px; font-size: 14px; }
.su-add { gap: 14px; }
.su-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.su-band { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--oat); border-radius: 16px 12px 18px 10px; background: var(--surface);
  text-align: left; cursor: pointer; font: inherit; transition: background-color 0.15s ease, border-color 0.15s ease; }
.su-band b { font: 800 15px/1.2 'Nunito', sans-serif; color: var(--forest); }
.su-band span { font-size: 12px; color: var(--text-secondary); }
.su-band.on { border-color: var(--forest); background-color: var(--forest); }
.su-band.on b, .su-band.on span { color: var(--cream); }
.su-add-actions { justify-content: center; gap: 24px; align-items: center; }

/* where plans live */
.su-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.su-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1.5px solid var(--oat); border-radius: 20px 16px 22px 14px;
  background: var(--surface); text-align: left; cursor: pointer; font: inherit; transition: background-color 0.15s ease, border-color 0.15s ease; }
.su-tile b { font: 800 15px/1.15 'Nunito', sans-serif; color: var(--forest); }
.su-tile > span:last-child { font-size: 12px; line-height: 1.3; color: var(--text-secondary); }
.su-tile-blob { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 38px; margin-bottom: 2px; border-radius: var(--blob-2); color: var(--forest); }
.su-tile.on { border-color: var(--forest); background-color: var(--forest); }
.su-tile.on b, .su-tile.on > span:last-child { color: var(--cream); }
@media (hover: hover) { .su-tile:not(.on):hover, .su-band:not(.on):hover { border-color: var(--forest); } }

/* the save */
.su-kept { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background-color: var(--cream); }
.su-kept .text-label-caps { margin: 0; }
.su-kept-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.su-kept-blob { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; color: #FFFFFF; font: 800 13px/1 'Nunito', sans-serif; }
.su-kept-plan { padding: 4px 10px; border-radius: var(--pill-2); background-color: var(--surface); font-size: 12px; color: var(--forest); }
.su-promise { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; background-color: var(--butter); font-size: 13px; line-height: 1.45; }
.su-promise .edie-doodle { color: var(--forest); flex: 0 0 auto; margin-top: 1px; }

/* 2026-10-19, redesign piece 3 (storyboard frames 2 to 6) */
/* the chapter strip: Household on, the rest still to come */
.su-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: -4px 0 0; padding: 0; list-style: none; }
.su-chapters li { padding: 5px 10px; border-radius: 12px 10px 13px 9px; background-color: #F1EBE3; color: #8A8290; font: 600 12px/1 'Nunito', sans-serif; white-space: nowrap; }
.su-chapters li.on { background-color: var(--forest); color: #FFFFFF; }
/* the wall's title: the family's name, with the pencil Change blob (d110, re-walk W78) */
.su-family-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: -4px; }
.su-family-name b { font: 800 22px/1.2 'Nunito', sans-serif; color: var(--forest); }
/* Where's home? */
.su-home { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1.5px dashed var(--oat); border-radius: 16px; }
.su-home label { font-size: 15px; line-height: 1.45; color: var(--text-secondary); }
.su-home label b { color: var(--charcoal); font-weight: 600; }
.su-home-input { width: 100%; padding: 6px 0 2px; border: 0; border-bottom: 1.5px solid var(--oat); background: transparent; font: 400 16px/1.4 'Jost', sans-serif; color: var(--charcoal); }
.su-home-input:focus { outline: none; border-bottom-color: var(--forest); }
/* a person's card: the Family page's fields, labels in capitals */
.su-cap { margin: 0; }
.su-add .chips { gap: 8px; }
.su-chip { padding: 8px 16px; border: 1.5px solid var(--oat); background-color: var(--surface); font: 400 16px/1.2 'Jost', sans-serif; color: var(--charcoal); }
.su-chip:nth-child(3n+2) { border-radius: var(--pill-2); }
.su-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.su-swatch { width: 42px; height: 42px; border: 3px solid #FFFFFF; border-radius: 9999px; box-shadow: 0 0 0 1px var(--oat); cursor: pointer; }
.su-swatch.selected { box-shadow: 0 0 0 2.5px var(--forest); }
/* the code: six blobs over one input, so the phone's suggested code fills them */
.su-code-blobs { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.su-code-blob { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.05; background-color: #F1EBE3; font: 800 26px/1 'Nunito', sans-serif; color: var(--forest); }
.su-code-blob.next { background-color: #F1EBE3; box-shadow: inset 0 0 0 2.5px var(--forest); }
.su-code-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.01; border: 0; font-size: 16px; color: transparent; caret-color: transparent; background: transparent; }
.su-checking { display: flex; justify-content: center; }

@keyframes suIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .su-note p { animation: none; } }