/* Help me decide: the Studio's ••• → "Help me decide…" sheet (Views/Studio/HelpMeDecideSheet.swift) and the card
   that says why over the look (Views/Studio/HelpMeDecideCard.swift). It reuses the shared Studio screen in site.css
   and extends it under .helpme-section only. Inside the phone, sizes are iOS points (var(--pt)) on an iPhone 17. */

.helpme-section { background: var(--white); }

/* ---------- Layout: the copy left and the phone right on wide screens (the Studio before it has its phone on the
   left); copy, phone, points when stacked ---------- */
.helpme-section .helpme-split {
  align-items: start;
  gap: clamp(36px, 6vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "demo" "points";
}
.helpme-section .helpme-head { grid-area: head; margin-bottom: 0; }
.helpme-section .helpme-head .h2 em { white-space: nowrap; }
.helpme-demo { grid-area: demo; display: grid; justify-items: center; min-width: 0; }
.helpme-section .helpme-points { grid-area: points; margin-top: 0; gap: 20px; }
.helpme-section .helpme-points strong { color: var(--ink); }
.helpme-section .helpme-points p { text-wrap: pretty; }

@media (min-width: 640px) and (max-width: 899px) {
  .helpme-section .helpme-head,
  .helpme-section .helpme-points { max-width: 640px; }
}
@media (min-width: 900px) {
  .helpme-section .helpme-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". demo" "head demo" "points demo" ". demo";
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 0;
    align-items: center;
  }
  .helpme-section .helpme-points { margin-top: 36px; }
}

/* ---------- Around the phone ---------- */
.helpme-try {
  margin-top: 26px;
  font-size: 14.5px; font-weight: 550; color: var(--ink-2);
}
.helpme-section .helpme-controls { margin-top: 10px; max-width: 460px; }
.helpme-section .helpme-controls .chip-btn { transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; }
.helpme-section .helpme-note { max-width: 30em; color: var(--ink-2); }
.helpme-nowrap { white-space: nowrap; }

/* =====================================================================================================
   Inside the phone
   ===================================================================================================== */
.helpme-section .helpme-screen { cursor: default; }

/* The finger moves quickly between taps (it's only seen when it presses). */
.helpme-section .tap-dot { transition: opacity 0.2s, scale 0.3s var(--ease), left 0.32s var(--ease), top 0.32s var(--ease); }

/* Over the bottom of the look, above the clothes: "Dressing you…", then the answer card under it. */
.helpme-overlay {
  position: absolute; z-index: 8; left: 0; right: 0; bottom: calc(var(--pt) * 238);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.helpme-section .helpme-overlay .studio-status {
  position: relative; top: auto; left: auto; translate: none; z-index: auto;
  margin-bottom: calc(var(--pt) * 22);
  gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 11) calc(var(--pt) * 18);
  font-size: calc(var(--pt) * 15);
  background: rgba(246, 246, 248, 0.82);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.helpme-section .helpme-overlay .studio-status .spinner { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); }
.helpme-section .studio-look.is-dim { opacity: 0.5; }

/* ---------- The answer: the open card, or folded into "Why" in the corner ---------- */
.helpme-answer {
  display: grid; align-items: end;
  width: 100%; padding: 0 calc(var(--pt) * 24); margin-bottom: calc(var(--pt) * 16);
}
.helpme-answer[hidden] { display: none; }
.helpme-answer.is-entering { animation: helpme-in 0.42s var(--ease) both; }
.helpme-answer.is-leaving { animation: helpme-out 0.24s ease both; }
@keyframes helpme-in { from { opacity: 0; transform: translateY(calc(var(--pt) * 24)); } }
@keyframes helpme-out { to { opacity: 0; transform: translateY(calc(var(--pt) * 14)); } }

.helpme-card,
.helpme-fold { grid-area: 1 / 1; pointer-events: auto; }
.helpme-card {
  display: flex; align-items: flex-start; gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 8) 0 calc(var(--pt) * 8) calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 14);
  background: rgba(246, 246, 248, 0.84);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 calc(var(--pt) * 6) calc(var(--pt) * 20) rgba(0, 0, 0, 0.08);
  transform-origin: 85% 100%;
  transition: opacity 0.22s ease, scale 0.3s var(--ease), visibility 0s;
}
.helpme-card__main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: calc(var(--pt) * 10); }
.helpme-card__text { flex: 1; min-width: 0; display: grid; justify-items: start; gap: calc(var(--pt) * 6); }
.helpme-card__why {
  font-size: calc(var(--pt) * 13); line-height: calc(var(--pt) * 18); letter-spacing: -0.003em; color: #000;
  text-wrap: pretty;
}

/* A piece in miniature, as the tray's tile (Theme.backdrop behind the photo). */
.helpme-thumb {
  position: relative; flex: none; display: block; overflow: hidden;
  border-radius: calc(var(--pt) * 8); background: var(--paper-2);
}
.helpme-thumb img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.helpme-thumb--card {
  width: calc(var(--pt) * 36); height: calc(var(--pt) * 46); margin-top: calc(var(--pt) * 2);
  box-shadow: 0 0 calc(var(--pt) * 2) rgba(0, 0, 0, 0.08);
}
.helpme-thumb--fold { width: calc(var(--pt) * 22); height: calc(var(--pt) * 28); border-radius: calc(var(--pt) * 5); }
.helpme-thumb--worn { width: calc(var(--pt) * 40); height: calc(var(--pt) * 52); }

/* Undo: a small bordered button in the accent colour. */
.helpme-undo {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 5);
  height: calc(var(--pt) * 28); padding: 0 calc(var(--pt) * 11);
  border-radius: 999px; background: rgba(90, 91, 216, 0.14); color: var(--accent-ink);
  font-size: calc(var(--pt) * 13); font-weight: 600; letter-spacing: -0.01em;
  transition: background 0.15s, scale 0.15s;
}
.helpme-undo svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.helpme-undo:hover { background: rgba(90, 91, 216, 0.22); }
.helpme-undo:active { scale: 0.96; }

/* The cross: drawn 26 pt, tapped in 44 pt. */
.helpme-x {
  flex: none; display: grid; place-items: center;
  width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); margin-top: calc(var(--pt) * -2);
  border-radius: 50%; color: rgba(60, 60, 67, 0.62);
}
.helpme-x span {
  display: grid; place-items: center;
  width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); border-radius: 50%;
  background: rgba(118, 118, 128, 0.14); transition: background 0.15s;
}
.helpme-x svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }
.helpme-x:hover span { background: rgba(118, 118, 128, 0.24); }

/* Folded: the piece and "Why", with Undo, in the corner beside her feet. */
.helpme-fold {
  justify-self: end; align-self: end;
  display: flex; align-items: center; gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 2) calc(var(--pt) * 2) calc(var(--pt) * 2) calc(var(--pt) * 6);
  border-radius: 999px;
  background: rgba(246, 246, 248, 0.84);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 calc(var(--pt) * 4) calc(var(--pt) * 14) rgba(0, 0, 0, 0.08);
  opacity: 0; visibility: hidden; scale: 0.9; transform-origin: 100% 50%;
  transition: opacity 0.2s ease, scale 0.3s var(--ease), visibility 0s 0.3s;
}
.helpme-fold__why {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 4) calc(var(--pt) * 2) calc(var(--pt) * 4) 0; border-radius: 999px;
  font-size: calc(var(--pt) * 13); font-weight: 600; color: #000;
}
.helpme-fold__undo {
  display: grid; place-items: center;
  width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); border-radius: 50%; color: var(--accent);
  transition: background 0.15s;
}
.helpme-fold__undo svg { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); }
.helpme-fold__undo:hover { background: rgba(90, 91, 216, 0.12); }

.helpme-answer.is-folded .helpme-card {
  opacity: 0; visibility: hidden; scale: 0.94; pointer-events: none;
  transition: opacity 0.2s ease, scale 0.3s var(--ease), visibility 0s 0.3s;
}
.helpme-answer.is-folded .helpme-fold {
  opacity: 1; visibility: visible; scale: 1;
  transition: opacity 0.25s ease 0.08s, scale 0.35s var(--ease) 0.08s, visibility 0s;
}
.helpme-card__main { cursor: pointer; }

/* Focus rings that fit inside the small phone. */
.helpme-section .helpme-screen button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 999px; }

/* ---------- The ••• menu ---------- */
.helpme-section .helpme-more { transition: background 0.15s, scale 0.15s; }
.helpme-section .helpme-more.is-pressed { background: rgba(225, 225, 228, 0.95); scale: 0.94; }
.helpme-menu {
  position: absolute; z-index: 28; top: calc(var(--pt) * 56); left: calc(var(--pt) * 16);
  width: calc(var(--pt) * 284); padding: calc(var(--pt) * 8) 0;
  border-radius: calc(var(--pt) * 26);
  background: rgba(248, 248, 250, 0.9);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 calc(var(--pt) * 12) calc(var(--pt) * 44) rgba(0, 0, 0, 0.2);
  transform-origin: calc(var(--pt) * 22) calc(var(--pt) * 22);
  opacity: 0; scale: 0.3; visibility: hidden;
  transition: opacity 0.2s ease, scale 0.32s var(--ease), visibility 0s 0.32s;
}
.helpme-menu.is-open { opacity: 1; scale: 1; visibility: visible; transition: opacity 0.18s ease, scale 0.38s cubic-bezier(0.3, 1.25, 0.5, 1), visibility 0s; }
.helpme-menu__item {
  display: flex; align-items: center; gap: calc(var(--pt) * 12);
  margin: 0 calc(var(--pt) * 8); padding: calc(var(--pt) * 11) calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 14);
  font-size: calc(var(--pt) * 17); line-height: calc(var(--pt) * 22); color: #000;
  transition: background 0.12s;
}
.helpme-menu__item svg { flex: none; width: calc(var(--pt) * 21); height: calc(var(--pt) * 21); }
.helpme-menu__item.is-destructive { color: #ff3b30; }
.helpme-menu__item.is-pressed { background: rgba(0, 0, 0, 0.08); }
.helpme-menu__sep { display: block; height: 0.5px; margin: calc(var(--pt) * 6) calc(var(--pt) * 20); background: rgba(0, 0, 0, 0.14); }

/* ---------- The sheet ---------- */
.helpme-dim {
  position: absolute; z-index: 26; inset: 0; background: rgba(0, 0, 0, 0.2);
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.helpme-dim.is-on { opacity: 1; }

.helpme-sheet {
  position: absolute; z-index: 27; left: calc(var(--pt) * 8); right: calc(var(--pt) * 8); bottom: calc(var(--pt) * 8);
  height: calc(var(--pt) * 548);
  display: flex; flex-direction: column;
  border-radius: calc(var(--pt) * 38) calc(var(--pt) * 38) calc(var(--pt) * 46) calc(var(--pt) * 46);
  background: rgba(252, 252, 253, 0.96);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 calc(var(--pt) * -4) calc(var(--pt) * 30) rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transform: translateY(calc(100% + var(--pt) * 24));
  visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.42s;
}
.helpme-sheet.is-open { transform: none; visibility: visible; transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; }
.helpme-sheet__grabber {
  position: absolute; top: calc(var(--pt) * 5); left: 50%; translate: -50% 0;
  width: calc(var(--pt) * 36); height: calc(var(--pt) * 5); border-radius: 999px; background: rgba(60, 60, 67, 0.3);
}
.helpme-sheet__nav {
  position: relative; flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(var(--pt) * 14) calc(var(--pt) * 14) 0;
}
.helpme-sheet__close {
  justify-self: start;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 calc(var(--pt) * 3) calc(var(--pt) * 12) rgba(0, 0, 0, 0.08);
}
.helpme-sheet__body {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: calc(var(--pt) * 16);
  padding: calc(var(--pt) * 14) calc(var(--pt) * 20) 0;
}
.helpme-sheet__intro { font-size: calc(var(--pt) * 15); line-height: calc(var(--pt) * 20); color: rgba(60, 60, 67, 0.6); }
.helpme-sheet__worn { display: flex; gap: calc(var(--pt) * 6); }

.helpme-field {
  position: relative; flex: none;
  min-height: calc(var(--pt) * 72); padding: calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 14); background: #f0f0f3;
  font-size: calc(var(--pt) * 17); line-height: calc(var(--pt) * 22); color: #000;
  transition: color 0.2s;
}
.helpme-field__ph { display: none; color: rgba(60, 60, 67, 0.3); }
.helpme-field.is-empty .helpme-field__ph { display: inline; }
.helpme-caret {
  display: none; vertical-align: top;
  width: calc(var(--pt) * 2); height: calc(var(--pt) * 22); margin: 0 calc(var(--pt) * 1) 0 calc(var(--pt) * 0.5);
  border-radius: 1px; background: var(--accent);
  animation: helpme-blink 1s steps(1) infinite;
}
.helpme-field.is-empty .helpme-caret { margin-left: 0; }
.helpme-field.is-focused .helpme-caret { display: inline-block; }
@keyframes helpme-blink { 50% { opacity: 0; } }

.helpme-ideas { display: flex; flex-wrap: wrap; gap: calc(var(--pt) * 8); }
.helpme-idea {
  display: inline-flex; align-items: center;
  padding: calc(var(--pt) * 7) calc(var(--pt) * 12); border-radius: 999px; background: #f0f0f3;
  font-size: calc(var(--pt) * 13); line-height: calc(var(--pt) * 17); color: #000; white-space: nowrap;
  transition: background 0.12s, opacity 0.2s;
}
.helpme-idea.is-pressed { background: #dcdce1; }

.helpme-sheet__footer {
  flex: none; display: grid; gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 14) calc(var(--pt) * 16) calc(var(--pt) * 18);
}
.helpme-thinking {
  display: none; align-items: center; justify-content: center; gap: calc(var(--pt) * 8);
  font-size: calc(var(--pt) * 15); line-height: calc(var(--pt) * 20); color: rgba(60, 60, 67, 0.6);
}
.helpme-spinner {
  flex: none; width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); border-radius: 50%;
  border: calc(var(--pt) * 2) solid rgba(60, 60, 67, 0.18); border-top-color: rgba(60, 60, 67, 0.62);
  animation: helpme-spin 0.8s linear infinite;
}
@keyframes helpme-spin { to { rotate: 360deg; } }
.helpme-decide {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 7);
  height: calc(var(--pt) * 52); border-radius: 999px;
  background: rgba(120, 120, 128, 0.14); color: rgba(60, 60, 67, 0.32);
  font-size: calc(var(--pt) * 17); font-weight: 600;
  transition: background 0.2s, color 0.2s, scale 0.15s;
}
.helpme-decide svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); }
.helpme-sheet.has-question .helpme-decide { background: var(--accent); color: #fff; }
.helpme-decide.is-pressed { scale: 0.97; filter: brightness(0.92); }

/* Thinking: the question can't change, and the footer says so. */
.helpme-sheet.is-thinking .helpme-thinking { display: flex; }
.helpme-sheet.is-thinking .helpme-field { color: rgba(60, 60, 67, 0.45); }
.helpme-sheet.is-thinking .helpme-idea { opacity: 0.45; }
.helpme-sheet.is-thinking .helpme-decide { background: rgba(120, 120, 128, 0.14); color: rgba(60, 60, 67, 0.32); }