/* ============================================================
   The Instant Meditation Creator's three steps (AI meditation redesign,
   phase 4 of 5). One stylesheet for the shared partial
   templates/partials/ai_build_steps.html, loaded by the Studio and the
   homepage only. Cream card, Playfair Display headings, Inter body, teal
   selections, terracotta primary buttons. Every button and chip is at
   least 44px tall, and nothing is wider than a 390px phone.
   ============================================================ */
.aib {
  --aib-cream: #faf6f0;
  --aib-text: #3B2F28;
  --aib-muted: #5c4f46;
  --aib-muted-2: #6b5d54;
  --aib-teal: #3f6f66;
  --aib-primary: #9c4f37;
  --aib-disabled: #d9cbbb;
  --aib-line: #e3d8cb;
  background: var(--aib-cream);
  color: var(--aib-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 14px;
  padding: 20px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}
.aib *, .aib *::before, .aib *::after { box-sizing: border-box; }
.aib [hidden] { display: none !important; }

.aib .aib-head { margin: 0 0 10px; padding-right: 40px; }
.aib .aib-title {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: 1.45rem; line-height: 1.25; margin: 0; color: var(--aib-text);
}
.aib .aib-sub { margin: 4px 0 0; color: var(--aib-muted); }
.aib .ai-build-available { margin: 0 0 10px; font-size: .9rem; color: var(--aib-muted); }
.aib .ai-build-available-n.is-some { color: var(--aib-primary); font-weight: 700; }
.aib .ai-build-earn { margin: -6px 0 10px; font-size: .9rem; color: var(--aib-muted); }
.aib .ai-build-earn a { color: var(--aib-primary); font-weight: 600; }

/* The three step tabs: the current one filled teal, the others muted. */
.aib-tabs {
  list-style: none; margin: 12px 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.aib-tab {
  flex: 1 1 0; min-width: 0; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 10px; border-radius: 999px; text-align: center;
  background: #efe6da; color: var(--aib-muted-2); font-weight: 600; font-size: .9rem;
}
.aib-tab.is-active { background: var(--aib-teal); color: #fff; }

.aib .aib-h {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: 1.12rem; line-height: 1.3; margin: 0 0 8px; color: var(--aib-text);
}
.aib .aib-label { display: block; margin: 12px 0 6px; font-weight: 600; color: var(--aib-text); }
.aib .aib-help, .aib .aib-text-p { margin: 0 0 10px; color: var(--aib-muted); }
.aib .aib-text {
  width: 100%; min-height: 140px; resize: vertical; padding: 12px;
  border: 1.5px solid var(--aib-line); border-radius: 12px; background: #fff;
  font: inherit; color: var(--aib-text);
}
.aib-under {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  margin: 6px 0 0; font-size: .85rem; color: var(--aib-muted-2);
}
.aib-count { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Pill buttons and chips, all at least 44px tall. */
.aib-btns {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
  margin: 18px 0 0;
}
.aib-btn, .aib-chip, .aib-group-head {
  min-height: 44px; border-radius: 999px; font: inherit; font-weight: 600;
  cursor: pointer;
}
.aib-btn { padding: 10px 22px; border: 1.5px solid transparent; }
.aib-primary { background: var(--aib-primary); color: #fff; }
.aib-primary:hover { filter: brightness(1.06); }
.aib-primary:disabled {
  background: var(--aib-disabled); color: var(--aib-muted); cursor: not-allowed;
  filter: none;
}
.aib-secondary { background: #fff; border-color: var(--aib-line); color: var(--aib-text); }
.aib-toggle {
  display: block; margin: 14px 0 0; background: #fff;
  border-color: var(--aib-line); color: var(--aib-text);
}
.aib-toggle[aria-pressed="true"] { background: var(--aib-teal); border-color: var(--aib-teal); color: #fff; }
.aib-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.aib-chip {
  padding: 8px 16px; background: #fff; color: var(--aib-text);
  border: 1.5px solid var(--aib-line);
}
.aib-chip[aria-pressed="true"] { background: var(--aib-teal); border-color: var(--aib-teal); color: #fff; }
.aib-chip:disabled { opacity: .55; cursor: not-allowed; }
.aib-btn:focus-visible, .aib-chip:focus-visible, .aib-group-head:focus-visible,
.aib-text:focus-visible, .aib-range:focus-visible, .aib-check input:focus-visible,
.aib .ai-music-toggle:focus-visible, .aib .ai-music-row:focus-visible,
.aib .ai-music-play:focus-visible, .aib .ai-music-clear:focus-visible {
  outline: 3px solid var(--aib-teal); outline-offset: 2px;
}

.aib-range { width: 100%; min-height: 44px; accent-color: var(--aib-teal); }
.aib .aib-length { margin: 14px 0 0; font-weight: 600; }
.aib-warning {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  background: #fff3cd; border: 1.5px solid #f0d58c; color: #5c3d10; font-size: .9rem;
}

/* Step 3's cards. */
.aib-card {
  background: #fff; border: 1px solid var(--aib-line); border-radius: 14px;
  padding: 16px; margin: 0 0 14px;
}
.aib-card-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px;
}
.aib-chosen { color: var(--aib-teal); font-weight: 700; }
.aib-scale {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .8rem; color: var(--aib-muted-2);
}
.aib-scale span { flex: 1 1 0; }
.aib-scale span:nth-child(2) { text-align: center; }
.aib-scale span:nth-child(3) { text-align: right; }
.aib .aib-talk-line { margin: 10px 0 0; font-weight: 600; color: var(--aib-teal); }

/* A category group: a full-width header button, then its chips. */
.aib-group { border-top: 1px solid var(--aib-line); }
.aib-group:last-of-type { border-bottom: 1px solid var(--aib-line); }
.aib-group-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 4px; border: none; border-radius: 10px;
  background: none; color: var(--aib-text); text-align: left;
}
.aib-group-right { display: flex; align-items: center; gap: 14px; flex: none; }
.aib-group-count { color: var(--aib-teal); }
.aib-group-toggle { color: var(--aib-primary); }
.aib-group-body { margin: 0 0 12px; }
.aib-check {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 0 0;
  color: var(--aib-text); cursor: pointer;
}
.aib-check input { width: 20px; height: 20px; accent-color: var(--aib-teal); }

.aib .aib-error {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid #b3412e; color: #8e2f20; background: #fff;
}
.aib .aib-status { margin: 10px 0 0; color: var(--aib-text); }
.aib .ai-build-quota { margin: 6px 0 0; font-weight: 600; color: var(--aib-text); }
.aib .imc-build-progress {
  width: 100%; height: 4px; margin: 10px 0 0; overflow: hidden;
  border-radius: 2px; background: rgba(143, 74, 53, 0.15);
}
.aib .imc-build-progress-fill {
  height: 100%; width: 30%; border-radius: 2px; background: #8f4a35;
}
@media (prefers-reduced-motion: no-preference) {
  .aib .imc-build-progress-fill { animation: aibProgressSlide 2s ease-in-out infinite; }
  @keyframes aibProgressSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
  }
}

/* The music pickers, restyled to the card. */
.aib-music { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.aib-slot { min-width: 0; }
.aib .ai-music-picker { position: relative; }
.aib .ai-music-current, .aib .ai-music-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.aib .ai-music-current {
  min-height: 48px; padding: 2px 6px; border: 1.5px solid var(--aib-line);
  border-radius: 12px; background: #fff;
}
.aib .ai-music-picker.ai-music-picked .ai-music-current { border-color: var(--aib-teal); }
.aib .ai-music-toggle {
  flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center;
  gap: 8px; border: none; background: none; padding: 4px 2px; font: inherit;
  color: var(--aib-text); text-align: left; cursor: pointer;
}
.aib .ai-music-shown { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.aib .ai-music-caret { color: var(--aib-muted-2); }
.aib .ai-music-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aib .ai-music-dur { flex: none; font-variant-numeric: tabular-nums; color: var(--aib-muted-2); font-size: .85rem; }
.aib .ai-music-tag {
  flex: none; padding: 1px 8px; border-radius: 999px; font-size: .75rem;
  background: #efe6da; color: var(--aib-muted); white-space: nowrap;
}
.aib .ai-music-play {
  flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0;
  border: none; background: var(--aib-primary); color: #fff;
  font-size: .8rem; line-height: 44px; text-align: center; cursor: pointer;
}
.aib .ai-music-play.playing { background: #7d3e2b; }
.aib .ai-music-play.ai-music-failed { background: var(--aib-muted-2); }
.aib .ai-music-clear {
  flex: none; min-width: 44px; min-height: 44px; border: none; background: none;
  font-size: 1.3rem; line-height: 1; color: var(--aib-muted-2); cursor: pointer;
}
.aib .ai-music-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  margin: 2px 0 0; padding: 4px 0; list-style: none;
  max-height: 260px; overflow-y: auto; background: #fff;
  border: 1.5px solid var(--aib-line); border-radius: 12px;
  box-shadow: 0 4px 14px rgba(59, 47, 40, .15);
}
.aib .ai-music-row { min-height: 48px; padding: 4px 10px; cursor: pointer; color: var(--aib-text); }
.aib .ai-music-row:hover, .aib .ai-music-row:focus { background: var(--aib-cream); }
.aib .ai-music-row[aria-selected="true"] { background: #efe6da; }

@media (max-width: 520px) {
  .aib { padding: 16px; }
  .aib .ai-music-row .ai-music-tag,
  .aib .ai-music-current .ai-music-tag { display: none; }
  .aib-tab { font-size: .82rem; padding: 6px 8px; }
  .aib-btns .aib-btn { flex: 1 1 auto; }
}

/* The Studio's modal is the cream card itself, its close button in the
   top right corner. */
.xp-modal.ai-build-modal {
  position: relative; max-width: 640px; max-height: 90vh; overflow-y: auto;
  padding: 0; background: #faf6f0; border-radius: 14px;
}
.ai-build-modal .ai-build-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  min-width: 44px; min-height: 44px; border: none; background: none;
  font-size: 1.6rem; line-height: 1; color: #5c4f46; cursor: pointer;
  border-radius: 999px;
}
.ai-build-modal .ai-build-close:focus-visible { outline: 3px solid #3f6f66; outline-offset: 2px; }

/* The homepage's hero card is already the card: the steps sit inside it. */
.hp-build .aib { background: transparent; padding: 0; border-radius: 0; }

/* The saved-projects dialog: over the Creator (the Studio's modal is
   z-index 1002), which stays open underneath. */
.aib .aib-manage {
  position: fixed; inset: 0; z-index: 1100; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .45);
}
.aib .aib-manage[hidden] { display: none; }
.aib .aib-manage-box {
  width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto;
  padding: 20px; border-radius: 14px; background: var(--aib-cream);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}
.aib .aib-manage-count { margin: 4px 0 0; color: var(--aib-muted); }
.aib .aib-manage-list { list-style: none; margin: 12px 0 0; padding: 0; }
.aib .aib-manage-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 0; border-top: 1px solid var(--aib-line);
}
.aib .aib-manage-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.aib .aib-manage-name { font-weight: 600; color: var(--aib-text); }
.aib .aib-manage-date { font-size: .85rem; color: var(--aib-muted-2); }
.aib .aib-manage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aib .aib-manage-ask { margin: 0; flex-basis: 100%; color: var(--aib-text); }
.aib .aib-manage-open-now { font-size: .85rem; font-weight: 600; color: var(--aib-muted); }
.aib .aib-manage-open { margin: 8px 0 0; }