/* Soul (js/profile/soul.js): a full page that slides in from the right over everything, the gray of
   the other full pages, ‹ Soul and Edit / Done on top, the parts in white rounded cards. */
.soul-page {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: #f2f4f7;
  color: #20211f;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.soul-page.is-open { transform: none; }
.soul-head {
  flex: none;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  height: 52px;
  padding: env(safe-area-inset-top, 0) 6px 0;
  box-sizing: content-box;
}
.soul-head strong { justify-self: center; font-size: 17px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.soul-back { justify-self: start; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: #20211f; cursor: pointer; }
.soul-action { justify-self: end; height: 36px; padding: 0 12px; border: 0; background: none; color: #2f6f82; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.soul-action:disabled { opacity: .5; }
.soul-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(28px + env(safe-area-inset-bottom, 0)); }

.soul-hero { display: grid; justify-items: center; gap: 4px; padding: 6px 0 14px; }
.soul-hero small { color: #6b7280; font-size: 13px; }
.soul-hero-mark svg { width: 56px; height: 56px; display: block; }

.soul-card { margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: #fff; }
.soul-card-title { margin: 0 0 10px; color: #6b7280; font-size: 13px; font-weight: 650; }
.soul-card.is-editing .soul-card-title { margin-bottom: 2px; color: #20211f; font-size: 16px; }
.soul-card-hint { margin: 0 0 12px; color: #8a8b84; font-size: 13.5px; line-height: 1.4; }

.soul-love + .soul-love { margin-top: 12px; }
.soul-love strong { display: block; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.soul-love small { display: block; margin-top: 2px; color: #6b7280; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }

.soul-now { display: flex; align-items: center; gap: 10px; font-size: 15px; overflow-wrap: anywhere; }
.soul-now + .soul-now { margin-top: 10px; }
.soul-now b { font-weight: 600; }
.soul-now-icon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #e6f1fb; font-size: 16px; }
.soul-now-icon.is-listen { background: #faeeda; }
.soul-now-icon.is-learn { background: #eaf3de; }
.soul-now-icon.is-watch { background: #fbeaf0; }

.soul-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.soul-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border-radius: 16px; background: #eaf3f6; color: #2f5f6e; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.soul-chip.is-edit { padding-right: 4px; }
.soul-chip.is-pick { border: 1.5px dashed #cfd2d6; background: none; color: #6b7280; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.soul-pick { margin-top: 12px; }
.soul-chip .soul-x { width: 26px; height: 26px; }

.soul-little { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 15px; }
.soul-little + .soul-little { border-top: 1px solid #efefeb; }
.soul-little span { color: #6b7280; }
.soul-little b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* Editing: boxes where the words were. */
.soul-page input {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: #f2f3f5;
  color: #20211f;
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
}
.soul-page input:focus { outline: 2px solid #61c8e6; outline-offset: 0; background: #fff; }
.soul-edit-row { display: flex; align-items: center; gap: 8px; }
.soul-edit-row + .soul-edit-row { margin-top: 10px; }
.soul-edit-row > input { flex: 1; }
.soul-edit-love { align-items: flex-start; }
.soul-edit-stack { flex: 1; min-width: 0; display: grid; gap: 6px; }
.soul-edit-stack input { width: 100%; }
.soul-edit-row > .soul-emoji { flex: none; width: 46px; padding: 0 !important; text-align: center; font-size: 20px !important; }
.soul-why { height: 38px !important; font-size: 15px !important; }
.soul-edit-little span { flex: none; width: 112px; color: #6b7280; font-size: 14px; }
.soul-x { flex: none; width: 32px; height: 32px; margin-top: 5px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #9a9da3; cursor: pointer; }
.soul-edit-row .soul-x { margin-top: 0; }
.soul-edit-love .soul-x { margin-top: 5px; }
.soul-kind { flex: none; height: 42px; padding: 0 10px; border: 0; border-radius: 11px; background: #eaf3f6; color: #2f5f6e; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.soul-add { display: block; margin-top: 12px; padding: 0; border: 0; background: none; color: #2f6f82; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.soul-ask-box { display: flex; gap: 8px; margin-top: 10px; }
.soul-chips + .soul-ask-box { margin-top: 12px; }
.soul-ask-box input { flex: 1; }
.soul-ask-box button { flex: none; height: 42px; padding: 0 16px; border: 0; border-radius: 11px; background: #1a1b1d; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

/* First time: empty, then one part at a time. */
.soul-empty { display: grid; justify-items: center; padding: 40px 12px; text-align: center; }
.soul-empty .soul-hero-mark svg { width: 72px; height: 72px; }
.soul-empty h2 { margin: 14px 0 6px; font-size: 19px; font-weight: 700; }
.soul-empty p { margin: 0 0 20px; color: #6b7280; font-size: 15px; line-height: 1.5; }
.soul-empty small { margin-top: 12px; color: #9a9da3; font-size: 13px; }
.soul-start { height: 48px; padding: 0 26px; border: 0; border-radius: 14px; background: #1a1b1d; color: #fff; font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; }
.soul-step { margin: 4px 4px 10px; color: #6b7280; font-size: 13px; font-weight: 600; }
.soul-step-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.soul-step-foot button { height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: none; color: #6b7280; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.soul-step-foot .is-next { padding: 0 28px; background: #1a1b1d; color: #fff; }

/* The Soul button on a friend's page, under their name. */
.visitor-soul-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-top: 10px; padding: 0 14px 0 8px; border: 0; border-radius: 17px; background: #f2f3f5; color: #20211f; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.visitor-soul-btn svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .soul-page { transition: none; }
}