/* Choose your setup (setup-plan.js): the quick-tap deck before any account is connected,
   plus the "Your setup" strip on Get connected. Full screen on phones, a centered card on desktop. */

.sp-deck { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--canvas, #f9f8f3); color: var(--ink, #16130a); display: flex; flex-direction: column; overflow: hidden; }
.sp-deck:not([open]) { display: none; }
.sp-deck::backdrop { background: rgb(22 19 10 / 55%); }
@media (min-width: 720px) {
  .sp-deck { margin: auto; width: min(640px, calc(100vw - 48px)); height: auto; max-height: min(92vh, 880px); border-radius: 28px; box-shadow: inset 0 0 0 2px var(--ink, #16130a), 10px 10px 0 var(--ink, #16130a); }
  .sp-deck::backdrop { backdrop-filter: blur(3px); }
}

.sp-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; padding-top: max(14px, env(safe-area-inset-top)); }
.sp-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: 1; }
.sp-dots li { flex: 1; height: 8px; border-radius: 99px; background: rgb(22 19 10 / 12%); transition: background 200ms ease; }
.sp-dots li.is-done { background: var(--ink, #16130a); }
.sp-dots li.is-here { background: var(--sun, #ffe14a); box-shadow: inset 0 0 0 2px var(--ink, #16130a); }
.sp-close { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--ink, #16130a); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink, #16130a); }
.sp-close:hover { background: var(--sun-soft, #fff4b8); }

.sp-stage { flex: 1; overflow: auto; padding: 4px 16px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.sp-card { display: grid; gap: 12px; justify-items: start; max-width: 560px; margin: 0 auto; animation: sp-in 320ms var(--ease, ease-out) both; }
.sp-stage[data-direction='back'] .sp-card { animation-name: sp-in-back; }
@keyframes sp-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes sp-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.sp-art { width: 112px; height: 112px; justify-self: center; animation: sp-bob 3.2s ease-in-out infinite; }
@keyframes sp-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.sp-kicker { margin: 0; }
.sp-title { margin: 0; font-size: clamp(28px, 7vw, 38px); line-height: 1.02; }
.sp-deck .sp-title:focus, .sp-deck .sp-title:focus-visible { outline: none; box-shadow: none; }
.sp-title--big { font-size: clamp(34px, 9vw, 48px); }
.sp-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2, rgb(22 19 10 / 72%)); }
.sp-did { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--cream, #fffbe6); box-shadow: inset 0 0 0 1.5px rgb(22 19 10 / 14%); font-size: 15px; line-height: 1.45; width: 100%; box-sizing: border-box; }
.sp-did .sm-sticker { margin-right: 4px; }
.sp-ask { margin: 4px 0 0; font-size: 17px; }
.sp-note { margin: 0; font-size: 14px; color: var(--green, #167a43); font-weight: 650; }
.sp-error:empty { display: none; }
.sp-error { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--hot-soft, #ffe1ea); color: #7d1235; font-weight: 650; }

.sp-yesno { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
.sp-yesno .btn { width: 100%; justify-content: center; min-height: 56px; font-size: 17px; }
.sp-yesno .sp-yes { box-shadow: 0 14px 26px -16px rgb(22 19 10 / 85%), 0 0 0 4px var(--sun, #ffe14a); }
.sp-yesno .sp-no.is-picked { background: #efece1; }
@media (min-width: 560px) { .sp-yesno { grid-template-columns: 1.4fr 1fr; } }

.sp-tiles { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
@media (min-width: 560px) { .sp-tiles--grid { grid-template-columns: 1fr 1fr; } }
.sp-tile { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; align-items: start; text-align: left; width: 100%; min-height: 64px; padding: 14px 14px 14px 12px; border: 0; border-radius: 18px; background: #fff; color: var(--ink, #16130a); box-shadow: inset 0 0 0 2px rgb(22 19 10 / 16%); cursor: pointer; font: inherit; transition: transform 140ms var(--spring, ease-out), box-shadow 140ms ease, background 140ms ease; }
.sp-tile:hover { box-shadow: inset 0 0 0 2px var(--ink, #16130a); transform: translateY(-1px); }
.sp-tile:active { transform: scale(0.98); }
.sp-tile.is-picked { background: var(--sun-soft, #fff4b8); box-shadow: inset 0 0 0 2.5px var(--ink, #16130a), 4px 4px 0 var(--ink, #16130a); }
.sp-tile.is-locked { cursor: default; }
.sp-tile-check { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgb(22 19 10 / 25%); color: transparent; font-weight: 900; font-size: 14px; margin-top: 1px; }
.sp-tile.is-picked .sp-tile-check { background: var(--ink, #16130a); color: var(--sun, #ffe14a); box-shadow: none; animation: hv-pop 320ms var(--spring, ease-out); }
.sp-tile-text { display: grid; gap: 2px; min-width: 0; }
.sp-tile-text strong { font-size: 16.5px; line-height: 1.25; }
.sp-tile-text small { font-size: 14px; line-height: 1.4; color: var(--ink-2, rgb(22 19 10 / 72%)); }
.sp-tile .sp-badge { grid-column: 2; justify-self: start; margin-top: 4px; }

.sp-other { display: grid; gap: 10px; width: 100%; }
.sp-other[hidden] { display: none; }
.sp-next { width: 100%; }
.sp-next .btn { width: 100%; justify-content: center; }
.sp-foot { width: 100%; display: flex; justify-content: flex-start; margin-top: 2px; }

.sp-card--intro .gc-navigator { margin: 4px 0; width: 100%; }
.sp-connects { width: 100%; display: grid; gap: 8px; }
.sp-connects .gc-kicker { margin: 0; }
.sp-connects .sp-chips li { padding: 4px 10px; }
.sp-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.sp-sum li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px 8px 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px rgb(22 19 10 / 12%); font-weight: 650; }
.sp-sum li.is-off { background: transparent; color: var(--ink-3, rgb(22 19 10 / 60%)); font-weight: 500; }
.sp-sum li.is-off img { filter: grayscale(1); opacity: .55; }

/* Get connected: "Choose your setup" first, then the "Your setup" strip once it's saved. */
.sp-hero-cta { display: inline-flex; align-items: center; gap: 10px; }
.sp-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 14px 18px; margin: 14px 0; }
.sp-strip-art { width: 56px; height: 56px; }
.sp-strip .gc-kicker { margin: 0 0 6px; }
.sp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--cream, #fffbe6); box-shadow: inset 0 0 0 1.5px rgb(22 19 10 / 14%); font-size: 13.5px; font-weight: 650; }
.sp-chips img { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .sp-strip { grid-template-columns: minmax(0, 1fr); }
  .sp-strip-art { display: none; }
  .sp-strip .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-stage[data-direction='back'] .sp-card, .sp-art, .sp-tile.is-picked .sp-tile-check { animation: none; }
  .sp-tile, .sp-tile:hover, .sp-tile:active { transition: none; transform: none; }
}