/* ==========================================================================
   Setup (setup.html) — Phase F.3 on the one design system.
   Loaded after the page's older styles and before spl-ui.css.
   ========================================================================== */

body.setup-page { background: var(--spl-ground); color: var(--spl-ink-2); }

/* AI Setup first: the manual wizard waits behind "Set up manually" (setup.js
   removes this class the moment the owner chooses manual, applies an AI draft,
   or AI Setup is unavailable). */
body.spl-ai-setup-active #setupForm { display: none !important; }

/* AI Setup card */
.spl-ai-setup { margin: var(--spl-s-5) 0; padding: var(--spl-s-5); border-radius: var(--spl-r-xl); background: var(--spl-accent-wash); border: 1px solid #d5e1fa; }
.spl-ai-setup h2 { margin: 0 0 6px; font-size: var(--spl-t-h2); font-weight: 650; letter-spacing: -0.02em; color: var(--spl-ink-1); }
.spl-ai-setup .help-text { font-size: var(--spl-t-helper); line-height: 1.5; color: var(--spl-ink-3); }
.spl-ai-setup textarea { min-height: 176px; background: var(--spl-surface); }
body.setup-page .spl-ai-setup > h2:first-child { margin-top: 0; } /* the card's padding is the top space; a 28px heading margin doubled it */
.spl-ai-setup-actions { display: flex; flex-wrap: wrap; gap: var(--spl-s-2); align-items: center; margin-top: var(--spl-s-3); }
.spl-ai-setup-actions .btn { min-height: 48px; border-radius: var(--spl-r); }
.spl-ai-setup-actions .btn.primary { flex: 1 1 220px; }
.spl-ai-setup-actions .btn.link { min-height: 44px; background: none; border: 0; box-shadow: none; color: var(--spl-accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 479px) { .spl-ai-setup { padding: var(--spl-s-4); } .spl-ai-setup-actions .btn { width: 100%; } }

/* `hidden` always wins on this page (".btn { display: … }" used to show e.g. "Cancel edit" and empty badges). */
body.setup-page [hidden] { display: none !important; }

/* AI Setup: status sits right under the description (visible while it works); review days/hours line up */
.spl-ai-status:empty { display: none; }
.spl-ai-status { margin: var(--spl-s-2) 0 0; font-weight: 600; color: var(--spl-ink-2); }
.spl-ai-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spl-s-2); }
.spl-ai-days label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.spl-ai-hours-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spl-s-3); margin-top: var(--spl-s-3); }
.spl-ai-hours-row label { display: grid; gap: 4px; font-weight: 600; }
.spl-ai-hours-row .input { width: 100%; min-width: 0; }

/* Suggestion chips (link names, service names): real touch targets, quieter than the field they help */
.setup-suggest-chip { min-height: 44px !important; padding: 0 14px !important; font-size: var(--spl-t-helper) !important; font-weight: 500 !important; color: var(--spl-ink-2) !important; background: var(--spl-surface) !important; border: 1px solid var(--spl-line, #e6e0d7) !important; border-radius: var(--spl-r-pill) !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-suggest-chip[hidden] { display: none !important; }
.setup-suggest-label { font-weight: 600 !important; color: var(--spl-ink-3) !important; }
.setup-suggest-more { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--spl-accent-strong); font: inherit; font-size: var(--spl-t-helper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.setup-suggest-more:focus-visible, .setup-suggest-chip:focus-visible { outline: 3px solid var(--spl-accent, #1657d0); outline-offset: 2px; }

/* Working days: one tile per day, checkbox beside its label (was stacked above it), no box inside a box */
body.setup-page .days-grid { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
body.setup-page .days-grid .checkbox-group { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 48px; padding: 0 14px !important; font-weight: 600; cursor: pointer; }
body.setup-page .days-grid .checkbox-group input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }

/* Saved service cards: on phones the details take the full width and the actions sit underneath
   (the three buttons used to squeeze the name into a two-letter column). */
@media (max-width: 599px) {
  body.setup-page .svc-card { flex-direction: column; align-items: stretch; }
  /* Same shape on every card: Edit and the default control side by side, Remove full width beneath
     (the default card used to wrap differently from the others — Owner screenshot 2026-09-21). */
  body.setup-page .svc-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  body.setup-page .svc-actions .svc-btn { min-height: 44px; }
  body.setup-page .svc-actions .svc-btn-danger { grid-column: 1 / -1; }
}
@media (min-width: 600px) {
  body.setup-page .svc-actions { align-items: center; }
  body.setup-page .svc-actions .svc-btn { min-height: 40px; }
}
body.setup-page .svc-title .svc-pill { white-space: nowrap; }

/* Step navigation: the primary action leads; Back is the same quiet control in the same place on every step. */
body.setup-page .wizard-nav-row { gap: var(--spl-s-3); flex-wrap: wrap; }
body.setup-page .wizard-nav-row .btn.spl-back {
  min-height: 44px; height: auto !important; padding: 0 14px; border: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--spl-ink-2) !important; font-weight: 600 !important; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
body.setup-page .wizard-nav-row .btn.spl-back:hover { color: var(--spl-ink-1) !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) {
  body.setup-page .wizard-nav-row { flex-direction: column-reverse; align-items: stretch; }
  body.setup-page .wizard-nav-row .btn.primary { width: 100%; min-width: 0 !important; }
  body.setup-page .wizard-nav-row .btn.spl-back { align-self: center; }
}

/* AI Setup by voice (ElevenLabs; off unless the server reports it ready) */
.spl-voice { margin-top: var(--spl-s-3); padding: var(--spl-s-3); border-radius: var(--spl-r); background: var(--spl-surface); border: 1px solid #d5e1fa; }
.spl-voice-state { margin: 0; font-weight: 600; color: var(--spl-ink-2); }
.spl-voice-preview { margin: var(--spl-s-2) 0 0; min-height: 0; max-height: 9em; overflow-y: auto; font-size: var(--spl-t-helper); line-height: 1.5; color: var(--spl-ink-2); white-space: pre-wrap; }
.spl-voice-preview:empty { display: none; }
.spl-voice-actions { display: flex; flex-wrap: wrap; gap: var(--spl-s-2); align-items: center; margin-top: var(--spl-s-3); }
.spl-voice-actions .btn { min-height: 48px; }
.spl-voice-actions .btn.link { min-height: 44px; background: none; border: 0; box-shadow: none; color: var(--spl-accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }