/* ══════════════════════════════════════════════════════════════
   SHAPE EXPAND — Tap-to-open role detail interaction

   Tapping a pulse shape breathes it open and reveals the role's
   health and status inline. Only one shape can be open at a time.
   Organic eased transitions throughout — no bounce or spring.
   ══════════════════════════════════════════════════════════════ */

/* ── Transition Base ─────────────────────────────────────────── */

.pulse-cluster {
  overflow: visible;
}

.pulse-cluster__item {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 350ms cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Backdrop Overlay ────────────────────────────────────────── */
/* Semi-transparent veil that dims the cluster when a shape is open.
   Tap to dismiss the expanded shape. */

.pulse-cluster__backdrop {
  position: absolute;
  inset: -24px;
  background: rgba(245, 240, 234, 0.82);
  border-radius: var(--radius-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 2;
}

.pulse-cluster--has-expanded .pulse-cluster__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ── Dimmed Items ────────────────────────────────────────────── */
/* Non-expanded shapes fade back but remain tappable so the user
   can switch directly to another role without dismissing first. */

.pulse-cluster--has-expanded .pulse-cluster__item {
  opacity: 0.15;
  z-index: 3;
}

/* ── Expanded Item ───────────────────────────────────────────── */
/* The tapped shape breathes larger and stays fully vivid. */

.pulse-cluster--has-expanded .pulse-cluster__item--expanded {
  opacity: 1;
  z-index: 4;
  transform: scale(1.18);
}

/* ── Expand Panel ────────────────────────────────────────────── */
/* Content card that appears near the expanded shape to show
   role health details. Positioned dynamically via JS. */

.pulse-cluster__expand-panel {
  position: absolute;
  left: 6%;
  right: 6%;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  z-index: 5;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.25, 0.1, 0.25, 1) 40ms,
              transform 320ms cubic-bezier(0.25, 0.1, 0.25, 1) 40ms;
}

.pulse-cluster--has-expanded .pulse-cluster__expand-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Close Button ────────────────────────────────────────────── */
/* Visible affordance for dismissal. Visually compact (24×24)
   but hit area meets Apple HIG minimum (44×44). */

.pulse-cluster__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 24px;
  height: 24px;
  padding: 10px;
  box-sizing: content-box;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  transition: color var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
}

.pulse-cluster__close:hover,
.pulse-cluster__close:focus-visible {
  color: var(--color-text-secondary);
}

/* ── Panel Content ───────────────────────────────────────────── */

.pulse-cluster__expand-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-right: var(--space-10);
}

.pulse-cluster__expand-role {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.pulse-cluster__expand-health {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pulse-cluster__expand-health-bar {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pulse-cluster__expand-health-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms;
}

.pulse-cluster__expand-health-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 2.5em;
}

.pulse-cluster__expand-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.pulse-cluster__expand-summary {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

/* ── Expand — Mobile ─────────────────────────────────────────── */

@media (max-width: 430px) {
  .pulse-cluster__expand-panel {
    left: 4%;
    right: 4%;
    padding: var(--space-3) var(--space-4);
  }

  .pulse-cluster__expand-role {
    font-size: var(--text-base);
  }
}

@media (max-width: 320px) {
  .pulse-cluster__expand-panel {
    left: 2%;
    right: 2%;
  }
}

/* ── Expand Panel — Scrollable Content ───────────────────────── */
/* The panel needs max-height and scroll when content grows
   (projects + intentions + activity + actions can be tall). */

.pulse-cluster__expand-panel {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════
   EXPANDED ROLE CONTENT — Projects, Intentions, Activity, Nudge

   Rich content sections that appear inside the expand panel
   when a pulse shape is tapped open. Phone-first, organic
   styling consistent with the non-geometric design language.
   ══════════════════════════════════════════════════════════════ */

/* ── Content Wrapper ─────────────────────────────────────────── */

.expand-content {
  margin-top: var(--space-3);
}

.expand-content__loading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-align: center;
  padding: var(--space-4) 0;
}

/* ── Sections (Projects, Intentions, Activity) ───────────────── */

.expand-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.expand-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.expand-section__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--space-2) 0;
}

.expand-section__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.expand-section__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

/* ── Project Dot ─────────────────────────────────────────────── */

.expand-project__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}

/* ── Intentions ──────────────────────────────────────────────── */

.expand-intention {
  position: relative;
}

.expand-intention__icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.expand-intention__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expand-intention--done .expand-intention__icon {
  color: var(--color-success);
}

.expand-intention--done .expand-intention__text {
  text-decoration: line-through;
  color: var(--color-text-tertiary);
}

.expand-intention--stone .expand-intention__icon {
  color: var(--color-accent);
}

/* Inline promote-to-stone button on intention items */
.expand-action-inline {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  transition: color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
}

.expand-action-inline:hover,
.expand-action-inline:focus-visible {
  color: var(--color-accent);
  background: var(--color-accent-faint);
}

.expand-action-inline--done {
  color: var(--color-success);
  background: transparent;
  pointer-events: none;
}

/* ── Activity ────────────────────────────────────────────────── */

.expand-activity__icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-success);
}

.expand-activity__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expand-activity__meta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* ── Empty States ────────────────────────────────────────────── */
/* Each empty state is distinct and actionable — not generic blanks. */

.expand-section__empty {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: var(--leading-relaxed);
  font-style: italic;
  margin: 0;
  padding: var(--space-1) 0;
}

/* ── ZOE Nudge ───────────────────────────────────────────────── */
/* Conversational nudge that gives the shape a living quality. */

.expand-nudge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.expand-nudge__icon {
  flex-shrink: 0;
  font-size: var(--text-base);
  line-height: 1;
  margin-top: 1px;
}

.expand-nudge__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ── Action Buttons ──────────────────────────────────────────── */

.expand-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.expand-actions__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.expand-actions__btn:hover,
.expand-actions__btn:focus-visible {
  color: var(--color-text-primary);
  border-color: var(--color-accent);
  background: var(--color-accent-faint);
}

.expand-actions__btn svg {
  flex-shrink: 0;
}

/* ── Inline Form (Add Intention) ─────────────────────────────── */

.expand-inline-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.expand-inline-form__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-default);
  box-sizing: border-box;
}

.expand-inline-form__input:focus {
  border-color: var(--color-accent);
}

.expand-inline-form__input::placeholder {
  color: var(--color-text-tertiary);
}

.expand-inline-form__select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238A8279' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

.expand-inline-form__buttons {
  display: flex;
  gap: var(--space-2);
}

.expand-inline-form__btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
}

.expand-inline-form__btn--save {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.expand-inline-form__btn--save:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

.expand-inline-form__btn--cancel:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* ── Promote Backlog List ────────────────────────────────────── */

.expand-promote-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.expand-promote-list__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
}

.expand-promote-list__item {
  cursor: pointer;
  padding: var(--space-2) !important;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
}

.expand-promote-list__item:hover,
.expand-promote-list__item:focus-visible {
  background: var(--color-surface-muted);
}

.expand-promote-list__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Expand — Mobile ─────────────────────────────────────────── */

@media (max-width: 430px) {
  .pulse-cluster__expand-panel {
    max-height: 65vh;
  }

  .expand-nudge {
    padding: var(--space-2);
  }

  .expand-actions__btn {
    padding: var(--space-2);
    font-size: 0.6875rem;
  }
}

@media (max-width: 320px) {
  .pulse-cluster__expand-panel {
    max-height: 60vh;
  }
}

/* ── Expand — Reduced Motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pulse-cluster__item {
    transition: opacity var(--duration-fast) var(--ease-default) !important;
  }

  .pulse-cluster--has-expanded .pulse-cluster__item--expanded {
    transform: none;
  }

  .pulse-cluster__backdrop {
    transition: opacity var(--duration-fast) var(--ease-default) !important;
  }

  .pulse-cluster__expand-panel {
    transition: opacity var(--duration-fast) var(--ease-default) !important;
    transform: none !important;
  }

  .pulse-cluster--has-expanded .pulse-cluster__expand-panel {
    transform: none;
  }
}