/**
 * Join Team Wizard Styles
 * ============================================
 * Multi-step onboarding flow for invited teammates
 */

/* Modal Override */
.join-wizard-modal .wizard-content {
  max-width: 480px;
  width: 100%;
  padding: 0;
  /* SCROLL FIX (2026-07-10, user: "the modals have no scroll and the lower
     options aren't visible"). Was `overflow: hidden` with no height cap — a tall
     step (e.g. the Privacy step's 3 option cards + Complete Setup button) that
     exceeded the viewport was CLIPPED with no way to reach the lower options or
     the finish button. Cap the modal to the viewport and let the body scroll. */
  max-height: min(88vh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
}

/* Progress Bar */
.wizard-progress {
  height: 4px;
  background: var(--slate-200);
  border-radius: 2px 2px 0 0;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-400));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Wizard Step */
.wizard-step {
  padding: 40px 32px;
  text-align: center;
  animation: wizardFadeIn 0.3s ease;
}

@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Wizard Icon */
.wizard-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: var(--primary-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-icon i {
  font-size: 32px;
  color: var(--primary);
}

.wizard-icon.welcome-icon {
  background: linear-gradient(135deg, var(--amber-100), var(--orange-100));
}

.wizard-icon.welcome-icon i {
  color: var(--amber-500);
}

.wizard-icon.success-icon {
  background: var(--green-100);
}

.wizard-icon.success-icon i {
  color: var(--green-500);
}

.wizard-icon.error-icon {
  background: var(--red-100);
}

.wizard-icon.error-icon i {
  color: var(--red-500);
}

/* Titles */
.wizard-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 8px;
}

.team-name-display {
  font-size: 28px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 16px;
}

/* Branded invite-landing touches (2026-07-23): member-count line under the
   group name, and a quiet "enter the code instead" fallback link. */
.wizard-member-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-600);
  background: var(--slate-100, #f1f5f9);
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 0 16px;
}
.wizard-member-count i {
  font-size: 12px;
  opacity: 0.8;
}
.wizard-manual-code-link {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: none;
  padding: 4px;
  font-size: 13px;
  color: var(--slate-500);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}
.wizard-manual-code-link:hover {
  color: var(--slate-700, #334155);
}
body.dark-mode .wizard-member-count {
  background: #1e293b;
  color: #cbd5e1;
}
body.dark-mode .wizard-manual-code-link {
  color: #94a3b8;
}

.joined-team-name {
  font-size: 18px;
  color: var(--slate-600);
  margin-bottom: 24px;
}

.wizard-description {
  font-size: 15px;
  color: var(--slate-500);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Wizard Actions */
.wizard-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.wizard-actions .btn-lg {
  padding: 14px 32px;
  font-size: 16px;
}

/* Detected Timezone Display */
.detected-timezone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: var(--slate-100);
  border-radius: 12px;
  margin-bottom: 16px;
}

.tz-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--slate-800);
}

.tz-main i {
  color: var(--primary);
}

/* THE INVITER'S SETUP, ATTRIBUTED (2026-08-27)
   ---------------------------------------------------------------------------
   When someone was added via "Add someone I know", the zone and hours above
   are the values their teammate typed, not the browser's guess. Say whose they
   are and keep detection one tap away — "inviter wins" is only acceptable if
   it is visible and reversible. Sits directly under the field it explains. */
.jw-seed-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: -8px 0 16px;
  text-align: center;
}

.jw-seed-by {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.4;
}

/* A link, not a button: the primary action is accepting what is already shown,
   and a second filled button beside "That's right" would compete with it. */
.jw-seed-revert {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
}

.jw-seed-revert:hover {
  opacity: 0.8;
}

.jw-seed-revert:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.tz-offset {
  font-size: 14px;
  color: var(--slate-500);
}

/* Timezone Confirm Buttons */
.tz-confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* Timezone Change Form */
.tz-change-form {
  margin-bottom: 24px;
}

.tz-change-form .form-group {
  position: relative;
}

.tz-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}

.tz-suggestion {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--slate-100);
}

.tz-suggestion:hover {
  background: var(--primary-50);
}

/* Keyboard-active option (ArrowUp/Down via the tz-search combobox,
   ux-flows-10). Mirrors :hover plus an inset ring so the active option is
   visible to keyboard users even when the pointer rests elsewhere. */
.tz-suggestion.active,
.tz-suggestion[aria-selected="true"] {
  background: var(--primary-50);
  box-shadow: inset 0 0 0 2px var(--primary, #14b8a6);
}

.tz-suggestion:last-child {
  border-bottom: none;
}

.tz-city {
  font-weight: 500;
  color: var(--slate-800);
}

.tz-info {
  font-size: 12px;
  color: var(--slate-500);
}

/* Wizard Section */
.wizard-section {
  text-align: left;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}

.wizard-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 12px;
}

/* Working Hours Row */
.working-hours-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.working-hours-row .form-group {
  flex: 1;
}

.working-hours-row label {
  display: block;
  font-size: 12px;
  color: var(--slate-500);
  margin-bottom: 4px;
}

.working-hours-row .form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  font-size: 14px;
  background: var(--white);
}

.hours-separator {
  padding-bottom: 12px;
  color: var(--slate-400);
}

/* Calendar Benefits */
.calendar-benefits {
  text-align: left;
  margin-bottom: 24px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--slate-600);
}

.benefit-item i {
  color: var(--green-500);
  font-size: 16px;
}

/* Calendar Connect Buttons */
.calendar-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.calendar-connect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border: 2px solid var(--slate-200);
  border-radius: 10px;
  background: var(--white);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate-700);
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-connect-btn:hover {
  border-color: var(--primary);
  background: var(--primary-50);
}

/* Provider marks are the canonical .integration-icon tiles (settings-modals.css)
   so Google/Outlook look identical to the Settings integrations cards — the old
   bare flat-colour glyphs here (#4285f4 / #0078d4 on a naked <i>) were the only
   place in the app drawing the brands differently (user 2026-08-03). The tile
   is 42px in the settings cards; scale it to 30px inside this compact connect
   button. This file loads AFTER settings-modals.css, so these context overrides
   win the equal-specificity race by order. */
.calendar-connect-btn .integration-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md, 8px);
}

.calendar-connect-btn .integration-icon i {
  font-size: 1.1rem;
}

/* Calendar step: transient "finishing…" state while the integrations modal is
   open, and the confirmed "✓ Connected" state after a real connected event. */
.calendar-connecting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--slate-50, #f8fafc);
  border: 1px dashed var(--slate-300, #cbd5e1);
  font-size: 14px;
  color: var(--slate-600, #475569);
}

.calendar-connecting i { color: var(--primary, #14b8a6); }

.calendar-connected-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--green-50, #f0fdf4);
  border: 1px solid var(--green-300, #86efac);
  font-size: 15px;
  font-weight: 600;
  color: var(--green-700, #15803d);
}

.calendar-connected-state i {
  font-size: 20px;
  color: var(--green-500, #22c55e);
}

body.dark-mode .calendar-connecting {
  background: rgba(148, 163, 184, 0.12);
  border-color: var(--slate-600, #475569);
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .calendar-connected-state {
  background: rgba(34, 197, 94, 0.14);
  border-color: var(--green-600, #16a34a);
  color: var(--green-300, #86efac);
}

/* Privacy Note */
.privacy-note {
  font-size: 13px;
  color: var(--slate-500);
  margin-top: 16px;
}

.privacy-note i {
  margin-right: 6px;
}

/* 2026-08-25: the card matching the GROUP'S OWN default (unlocked groups) —
   quiet ring, same visual family as the canonical picker's selected state. */
.privacy-option-card.is-group-default {
  border-color: var(--primary-400, #2dd4bf);
}

/* 2026-08-26: brand the NATIVE radios. Unstyled, Android's Material You
   palette tints them from the user's wallpaper — reported live as a BROWN
   selected dot beside the app's teal, unlike the inviter-side picker
   (privacy-cards.css) whose custom radio is explicitly teal. accent-color is
   the whole fix: the UA keeps rendering, only the tint is pinned. */
.privacy-option-card input[type="radio"],
.privacy-fallback input[type="radio"] {
  accent-color: var(--primary-500, #14b8a6);
}

/* Hours-ownership line (2026-08-25): the joiner owns their hours; one quiet
   sentence under the section heading, same voice as .privacy-note. */
.jw-hours-ownership {
  font-size: 13px;
  color: var(--slate-500, #64748b);
  margin: 2px 0 10px;
}

/* ============================================================================
   JOIN-WIZARD PRIVACY STEP — preview blocks (2026-07-10 fix)
   ----------------------------------------------------------------------------
   The wizard's "What should the group see?" step reuses the class names
   .privacy-preview / .preview-block for a simple STACKED LIST of 3 sample rows
   (Busy / Free / a meeting title). But css/privacy-cards.css defines
   .preview-block as `position:absolute; top:4px; bottom:4px` — designed for a
   DIFFERENT component's absolute-positioned TIMELINE (blocks placed by inline
   left/width inside a sized .preview-track). With no track + no inline coords,
   all three absolute blocks collapsed onto each other AND escaped their card,
   overlapping the option labels — the garbled "Team Standup / Busy" text
   mashed over "Busy/Free Only" the user reported. Scope the blocks back into
   normal flow HERE (higher specificity via the wizard-modal ancestor beats the
   generic .preview-block), so each renders as its own stacked chip. */
#join-wizard-modal .privacy-options-with-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
/* COMPACT preview (2026-07-10, user: "why scroll when we have space"). The
   3 sample rows were a stacked list ~110px tall PER card → 3 cards overflowed a
   short viewport. Lay them in ONE short row of small bars (~28px tall total) so
   each card is compact and the whole step fits without scrolling on normal
   screens; scroll stays as the small-screen fallback. */
#join-wizard-modal .privacy-option-card .privacy-preview {
  display: flex;
  flex-direction: row;
  gap: 4px;
  background: var(--slate-100, #f1f5f9);
  border-radius: 6px;
  padding: 5px;
  margin: 6px 0;
}
#join-wizard-modal .privacy-option-card .privacy-preview .preview-block {
  /* Undo the absolute timeline positioning from privacy-cards.css. */
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  flex: 1;
  min-width: 0;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 4px;
  justify-content: center;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
#join-wizard-modal .privacy-option-card .privacy-preview .preview-block.busy {
  background: var(--slate-400, #94a3b8);
}
#join-wizard-modal .privacy-option-card .privacy-preview .preview-block.free {
  background: var(--slate-200, #e2e8f0);
  color: var(--slate-600, #475569);
}
#join-wizard-modal .privacy-option-card .privacy-preview .preview-block.full {
  background: var(--primary-500, #14b8a6);
}
#join-wizard-modal .privacy-option-card .privacy-preview .preview-block.private {
  background: var(--slate-500, #64748b);
}

/* COMPACT PRIVACY STEP CHROME (2026-07-10, "why scroll when we have space").
   The privacy step is the tallest (3 option cards); trim the surrounding chrome
   so it fits a normal viewport without scrolling — smaller step padding, a
   smaller icon with less margin, tighter card padding + description. */
#join-wizard-modal #wizard-step-4 {
  padding: 24px 28px;
}
#join-wizard-modal #wizard-step-4 .wizard-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
}
#join-wizard-modal #wizard-step-4 .wizard-icon i {
  font-size: 24px;
}
#join-wizard-modal #wizard-step-4 .wizard-title {
  margin-bottom: 4px;
}
#join-wizard-modal #wizard-step-4 .wizard-description {
  margin-bottom: 16px;
}
#join-wizard-modal #wizard-step-4 .privacy-option-card {
  padding: 12px;
}
#join-wizard-modal #wizard-step-4 .privacy-desc {
  margin: 4px 0 0;
  font-size: 12px;
}

/* ⭐2026-08-20 GROUP PRIVACY LOCK (owner: "inviting a user to a preexisting
   group with fixed privacy asks the invited user which privacy level? I assume
   they have no control?"). They have none: a locked preset resolves every
   choice to the same ceiling. Show which one the group enforces and dim the
   rest rather than offering three options that all do the same thing. Mirrors
   the event modal's .capped treatment so the vocabulary is consistent. */
#join-wizard-modal #wizard-step-4 .privacy-option-card.is-capped {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
#join-wizard-modal #wizard-step-4 .privacy-option-card.is-capped:hover {
  border-color: var(--slate-200);
  background: none;
}
#join-wizard-modal #wizard-step-4 .privacy-option-card.is-group-locked {
  border-color: var(--primary);
  background: var(--primary-50);
}
/* The lock note replaces the "change this anytime" line, which is false here. */
#join-wizard-modal #wizard-step-4[data-privacy-locked="true"] .privacy-note {
  color: var(--slate-600);
}
body.dark-mode #join-wizard-modal #wizard-step-4 .privacy-option-card.is-group-locked {
  background: var(--slate-700);
}
body.dark-mode #join-wizard-modal #wizard-step-4[data-privacy-locked="true"] .privacy-note {
  color: var(--slate-300);
}

/* Privacy Fallback (if cards not loaded) */
.privacy-fallback {
  text-align: left;
}

.privacy-fallback label {
  display: block;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.privacy-fallback label:hover {
  border-color: var(--primary);
  background: var(--primary-50);
}

.privacy-fallback input[type="radio"] {
  margin-right: 10px;
}

/* What Now List */
.what-now {
  text-align: left;
  background: var(--slate-100);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.what-now p {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 12px;
}

.what-now ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.what-now li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--slate-600);
}

.what-now li i {
  width: 20px;
  color: var(--primary);
}

.notification-note {
  font-size: 13px;
  color: var(--slate-500);
}

.notification-note i {
  margin-right: 6px;
  color: var(--primary);
}

/* Responsive */
@media (max-width: 480px) {
  .wizard-step {
    padding: 32px 20px;
  }

  .team-name-display {
    font-size: 22px;
  }

  .wizard-icon {
    width: 60px;
    height: 60px;
  }

  .wizard-icon i {
    font-size: 26px;
  }

  .tz-confirm-buttons {
    flex-direction: column;
  }

  .working-hours-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hours-separator {
    text-align: center;
    padding: 8px 0;
  }
}

/* Dark Mode
   ----------------------------------------------------------------------------
   Gate on the app's explicit `body.dark-mode` toggle, NOT on the OS
   `@media (prefers-color-scheme: dark)`. The rest of the app (style.css) is
   light-only unless the user turns dark mode on via the in-app toggle. The old
   media-query version made the join wizard — most visibly the "Invalid or
   Expired Invite" card — render DARK whenever the visitor's OS was in dark mode,
   while every other surface stayed light. Following body.dark-mode keeps the
   wizard consistent with the rest of the app. */
body.dark-mode .wizard-progress {
  background: var(--slate-700);
}

body.dark-mode .wizard-step {
  background: var(--slate-800);
}

body.dark-mode .wizard-icon {
  background: var(--slate-700);
}

body.dark-mode .wizard-title {
  color: var(--slate-200);
}

body.dark-mode .team-name-display {
  color: var(--white);
}

body.dark-mode .detected-timezone {
  background: var(--slate-700);
}

body.dark-mode .tz-main {
  color: var(--slate-200);
}

body.dark-mode .jw-seed-by {
  color: var(--slate-400);
}

body.dark-mode .tz-suggestions {
  background: var(--slate-700);
  border-color: var(--slate-600);
}

body.dark-mode .tz-suggestion:hover {
  background: var(--slate-600);
}

body.dark-mode .tz-suggestion.active,
body.dark-mode .tz-suggestion[aria-selected="true"] {
  background: var(--slate-600);
}

body.dark-mode .calendar-connect-btn {
  background: var(--slate-700);
  border-color: var(--slate-600);
  color: var(--slate-200);
}

body.dark-mode .calendar-connect-btn:hover {
  border-color: var(--primary);
  background: var(--slate-600);
}

body.dark-mode .what-now {
  background: var(--slate-700);
}