/* Welcome and setting up a new family (2026-10-08), from the "Edie
   onboarding" mock-up: the sign-in pages' background and white card,
   a little wider, with the mock-up's option cards, Polaroids and rows. */

[v-cloak] { display: none; }
.setup-card { width: 480px; gap: 18px; }
.setup-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.setup-logo { width: 96px; height: 54px; object-fit: contain; object-position: left center; }
.setup-step { display: flex; flex-direction: column; gap: 16px; }
.setup-head { display: flex; flex-direction: column; gap: 6px; }
.setup-head.center { text-align: center; }
.setup-count { font: 600 13px/1.4 'Jost', sans-serif; letter-spacing: 1.5px; color: #4F4955; margin: 0; }
.setup-title { font: 900 28px/1.2 'Nunito', sans-serif; color: #231F28; margin: 0; }
.setup-small { font-size: 13px; }
.setup-strong { color: #231F28; overflow-wrap: anywhere; }
.setup-actions { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.setup-actions.center { justify-content: center; }
.setup-actions.start { justify-content: flex-start; flex-wrap: wrap; }
.setup-small-btn { align-self: flex-start; padding: 7px 14px; font-size: 14px; }
.setup-label { margin: 4px 0 -8px 0; color: #4F4955; }
/* 2026-10-16: "Do this later" under Connect, and All set's "Two more ways..." */
.setup-later { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.setup-later p { margin: 0; }
.setup-ways { margin: 4px 0 -6px; text-align: center; }
.setup-badge { align-self: flex-start; }

/* Notes and the "connected" banner */
.setup-note { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px 22px 16px 20px; background-color: #FAF7F1;
  font: 400 14px/1.45 'Jost', sans-serif; color: #231F28; }
.setup-note p { margin: 0; }
.setup-note.lilac { background-color: #EADFF5; }
.setup-note-title { font: 800 16px/1.3 'Nunito', sans-serif; }
.setup-connected { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; background-color: #D3EFDF;
  font: 500 13px/1.4 'Jost', sans-serif; color: #1F3F34; overflow-wrap: anywhere; }

/* Welcome */
/* 2026-10-13 (Kathryn: less elongated): soft blob corners in px, so a wide
   button doesn't turn into a long ellipse */
.welcome-choice { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 22px 20px; text-decoration: none; color: #231F28;
  transition: transform 0.2s ease; }
.welcome-choice:hover { transform: translateY(-2px); }
.welcome-choice.mint { background-color: #D3EFDF; border-radius: 40px 52px 46px 34px / 36px 44px 50px 40px; }
.welcome-choice.butter { background-color: #FBE9CC; border-radius: 50px 38px 44px 52px / 42px 36px 48px 44px; }
.welcome-choice-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; }
.welcome-choice-icon.forest { background-color: #2F5A4B; }
.welcome-choice-icon.berry { background-color: #E0638F; }
.welcome-choice-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.welcome-choice-title { font: 800 19px/1.2 'Nunito', sans-serif; }
.welcome-blob { align-self: center; display: flex; align-items: center; justify-content: center; width: 110px; height: 104px; color: #2F5A4B;
  border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; }
.welcome-blob.butter { background-color: #FBE9CC; }
.welcome-blob.mint { background-color: #D3EFDF; }
.welcome-back { align-self: flex-start; }
#join { display: none; }
#join:target { display: flex; }
main:has(#join:target) #welcome-start { display: none; }

/* Your family: Polaroids */
.setup-polaroids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 8px 4px 0; }
.setup-polaroid { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; border: 0; border-radius: 6px; background-color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(46,42,51,0.12); cursor: pointer; text-align: center; transition: box-shadow 0.2s ease; }
.setup-polaroid:hover { box-shadow: 0 10px 22px rgba(46,42,51,0.18); }
.setup-tape { position: absolute; top: -9px; left: 50%; width: 56px; height: 18px; margin-left: -28px; opacity: .85; transform: rotate(-3deg); }
.setup-photo { display: flex; align-items: center; justify-content: center; height: 92px; border-radius: 3px; }
.setup-initial { display: inline-block; width: 48px; height: 46px; border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; color: #FFFFFF;
  font: 800 20px/46px 'Nunito', sans-serif; text-align: center; }
.setup-initial.small { flex: 0 0 auto; width: 34px; height: 32px; font-size: 15px; line-height: 32px; }
.setup-name { font: var(--hand-weight) calc(24px * var(--hand-scale))/1.1 var(--font-hand); color: #231F28; }
.setup-role { font-size: 13px; }
.setup-add { padding: 12px; border: 2px dashed #B7AFA4; border-radius: 999px; background: transparent; color: #231F28; font: 600 15px 'Jost', sans-serif;
  cursor: pointer; }
.setup-add:hover { border-color: #2F5A4B; color: #2F5A4B; }

/* Where do your calendars live? */
.setup-option { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 1px solid #EFE9DF;
  border-radius: 18px 22px 16px 20px; background-color: #FFFFFF; color: #231F28; text-align: left; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.setup-option:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(46,42,51,0.08); }
.setup-option:disabled { opacity: 0.6; cursor: wait; }
.setup-option > svg { flex: 0 0 auto; color: #6E6873; }
.setup-option-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; font: 900 20px 'Nunito', sans-serif; }
.setup-option-icon.google { background-color: #DDE8F5; color: #2B5C97; }
.setup-option-icon.apple { background-color: #EDE6DC; color: #231F28; }
.setup-option-icon.edie { background-color: #D3EFDF; color: #2F5A4B; }
.setup-option-icon.link { background-color: #FBE9CC; color: #8A5A12; }  /* butter, not lemon (d76) */
.setup-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 14px; }
.setup-option-title { font: 800 17px/1.25 'Nunito', sans-serif; }
.setup-howto { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 4px; font: 400 14px/1.45 'Jost', sans-serif; }

/* Whose is whose? */
.setup-rows { display: flex; flex-direction: column; gap: 6px; }
.setup-row { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background-color: #FAF7F1; }
.setup-row.unsure { box-shadow: inset 0 0 0 2px #E0638F; }
.setup-row-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.setup-row-title { font: 600 15px/1.3 'Jost', sans-serif; color: #231F28; overflow-wrap: anywhere; }
.setup-select { flex: 0 0 auto; max-width: 46%; padding: 6px 28px 6px 12px; border: 1.5px solid #E0638F; border-radius: 999px; background-color: #FCE0E7;
  font: 500 13px 'Jost', sans-serif; color: #231F28; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F4955' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.setup-select.off { border-color: #D6CFC4; background-color: #FFFFFF; }

/* Setup take 2 (2026-10-11): the questions and Calendars/Tasks ready to go */
.setup-q { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid #EFE9DF; border-radius: 18px 22px 16px 20px; }
.setup-q.sub { margin-left: 14px; border-style: dashed; }
.setup-q-title { margin: 0; font: 600 15px/1.35 'Jost', sans-serif; color: #231F28; }
.setup-q p.setup-small { margin: 0; }
.setup-row.off .setup-row-title { color: #8A838F; text-decoration: line-through; }
.setup-row.person .setup-select { border-color: #D6CFC4; background-color: #FFFFFF; max-width: 55%; }
.setup-row.person .setup-select.unsure { border-color: #E0638F; background-color: #FCE0E7; }
.setup-ok { flex: 0 0 auto; font: 600 13px 'Jost', sans-serif; color: #2F5A4B; }

/* Check everything */
.setup-people { display: flex; flex-direction: column; gap: 8px; }
.setup-person { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px 20px 18px 22px; }
.setup-person-row { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.setup-person .chip:not(.selected) { background-color: rgba(255,255,255,0.7); }
.setup-person .chip-text { font-size: 13px; }

/* The toast (no side menu on these pages) */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 10000; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 18px; border-radius: 999px; color: #FFFFFF;
  background-color: #2F5A4B; box-shadow: 0 8px 24px rgba(47, 90, 75, 0.25); }
.toast.error { background-color: #E0638F; }
.toast p { margin: 0; color: #FFFFFF; font: 600 15px/1.45 'Jost', sans-serif; }

@media (max-width: 767px) {
  .setup-card { width: 100%; }
  .setup-title { font-size: 24px; }
  .welcome-choice { padding: 18px 16px; }
}
a.btn-primary, a.btn-secondary { text-decoration: none; text-align: center; }
.setup-step .input-field[readonly] { background-color: #FAF7F1; color: #4F4955; }

/* Calendar links (2026-10-09) */
.setup-howto-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 14px; background-color: #FAF7F1; }
.setup-howto-box summary { cursor: pointer; font: 500 15px 'Jost', sans-serif; }
/* 2026-10-16: the how-to toggles are small actions (a blob with the words under it) */
.setup-howto-box summary.small-action { list-style: none; align-self: flex-start; font: 600 12px/1.2 'Jost', sans-serif; max-width: 180px; }
.setup-howto-box summary.small-action::-webkit-details-marker { display: none; }
.setup-howto-box[open] summary { margin-bottom: 6px; }
.setup-link-form { display: flex; flex-direction: column; gap: 12px; }
.setup-link-add { align-self: flex-start; min-width: 150px; }

/* Their own task lists: tick to sync (2026-10-11, stage 2) */
.setup-tick { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  border: 2px solid #2F5A4B; border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; background: #FFFFFF; color: #FFFFFF; cursor: pointer; }
.setup-tick.on { background-color: #2F5A4B; }
.setup-select.plain { border-color: #D6CFC4; background-color: #FFFFFF; max-width: 50%; }

/* The paper calendar (2026-10-11, stage 4) */
.setup-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.setup-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid #EFE9DF; }
.setup-file { position: relative; overflow: hidden; cursor: pointer; }
.setup-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.setup-note.mint { background-color: #D3EFDF; }

.setup-file-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }