/**
 * two-row-swipe.css
 * Last modified: v017.099 (2026-02-20)
 * Changes: Two-line swipe prompts — instruction line + category/question context line
 * Built on top of two-row-scale.css — only adds phase transitions and swipe highlight.
 */

/* ============================================
   CONTAINER MARGINS
   Add side padding matching half of the description text padding
   ============================================ */

.trs-progressive {
  padding: 0 0.25rem;
}

/* ============================================
   CONTEXTUAL PROMPTS
   "Experience Level: Category - Question" format
   ============================================ */

.trs-prompt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--theme-text-primary, #e0e0e0);
  margin-bottom: 0.75rem;
  text-align: left;
  line-height: 1.4;
}

.trs-prompt-instruction {
  font-weight: 400;
  color: var(--theme-text-secondary, rgba(255, 255, 255, 0.7));
}

.trs-prompt-context {
  font-weight: 600;
}

/* Hide label container when prompt provides the context */
.trs-progressive .trs-label-container {
  margin-bottom: 0;
  min-height: 0;
}

.trs-progressive .trs-exp-label {
  visibility: hidden;
  flex: 1;
}

/* ============================================
   PHASE 1: Experience only
   Desire row hidden, feedback hidden, experience full-width
   ============================================ */

.trs-progressive[data-phase="1"] .trs-desire-section {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
}

/* Phase 1: experience group stays at 4/7 width to match desire option sizes */
.trs-progressive[data-phase="1"] .slider-group-left {
  flex: 0 0 calc(400% / 7 - 1.5rem / 7);
}

.trs-progressive[data-phase="1"] .trs-feedback-group,
.trs-progressive[data-phase="1"] .trs-feedback-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ============================================
   PHASE 2: Experience + Desire
   Desire row slides in, experience still full-width, feedback still hidden
   Hide experience prompt, show desire prompt
   ============================================ */

.trs-progressive[data-phase="2"] .trs-desire-section {
  max-height: 200px;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transition: max-height 0.35s ease-out, opacity 0.25s ease-out 0.1s;
}

/* Phase 2: experience group stays at 4/7 width to match desire option sizes */
.trs-progressive[data-phase="2"] .slider-group-left {
  flex: 0 0 calc(400% / 7 - 1.5rem / 7);
  transition: flex 0.3s ease;
}

.trs-progressive[data-phase="2"] .trs-feedback-group,
.trs-progressive[data-phase="2"] .trs-feedback-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ============================================
   PHASE 3: Full — Experience + Desire + Feedback
   Everything visible, experience shrinks to standard 4/7
   ============================================ */

.trs-progressive[data-phase="3"] .trs-desire-section {
  max-height: 200px;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
}

.trs-progressive[data-phase="3"] .slider-group-left {
  flex: 0 0 calc(400% / 7 - 1.5rem / 7);
  transition: flex 0.3s ease;
}

.trs-progressive[data-phase="3"] .trs-feedback-group {
  max-width: calc(100% / 7 - 3rem / 7);
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transition: max-width 0.3s ease, opacity 0.3s ease 0.1s;
}

.trs-progressive[data-phase="3"] .trs-feedback-label {
  max-width: 200px;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transition: max-width 0.3s ease, opacity 0.3s ease 0.1s;
}

/* ============================================
   CURIOUS / UNKNOWN HIDING
   Hidden in phase 2+ but preserve their space so icons don't jump
   ============================================ */

.trs-desire-track .slider-option.trs-hidden-option {
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   EXPERIENCE TOOLTIPS DISABLED
   Tooltips interfere during swipe — remove from experience row
   (tooltips removed in JS, but this is a safety net)
   ============================================ */

.trs-experience-track .tooltip {
  display: none !important;
}

/* ============================================
   SWIPE HIGHLIGHT
   Strong visual feedback when finger is over a desire option during swipe
   Glow + scale + color fill for clear indication
   ============================================ */

.trs-desire-track .slider-option.trs-swipe-highlight {
  transform: scale(1.12);
  z-index: 2;
  transition: transform 0.1s ease-out;
}

.trs-desire-track .slider-option.trs-swipe-highlight .slider-bg {
  background: var(--option-color, #4f46e5);
  box-shadow: 0 0 16px var(--option-color, #4f46e5), 0 0 4px var(--option-color, #4f46e5);
  transform: scaleY(1.5);
}

.trs-desire-track .slider-option.trs-swipe-highlight .slider-icon {
  filter: brightness(1.2);
  transform: scale(1.25);
}

.trs-desire-track .slider-option.trs-swipe-highlight .slider-icon-svg {
  filter: drop-shadow(0 0 8px var(--option-color, #4f46e5)) brightness(1.1);
  transform: scale(1.25);
  color: var(--option-color, #4f46e5);
  opacity: 1;
}

.trs-desire-track .slider-option.trs-swipe-highlight .slider-label-text {
  color: var(--theme-text-primary, #fff);
  font-weight: 700;
}

/* ============================================
   DESIRE SELECTION HIGHLIGHT
   Stronger glow + pop when a desire level is selected (input:checked)
   ============================================ */

.trs-desire-track .slider-option input:checked ~ .slider-bg {
  box-shadow: 0 0 18px var(--option-color, #4f46e5), 0 0 6px var(--option-color, #4f46e5);
}

.trs-desire-track .slider-option input:checked ~ .slider-icon {
  transform: scale(1.2);
  filter: brightness(1.15);
}

.trs-desire-track .slider-option input:checked ~ .slider-icon-svg {
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px var(--option-color, #4f46e5))
         saturate(var(--theme-icon-svg-colored-selected-saturate, 1.2))
         brightness(var(--theme-icon-svg-colored-selected-brightness, 1.1));
}

/* ============================================
   FEEDBACK HIGHLIGHT ANIMATION
   Pulses the "Notes?" label after desire selection
   ============================================ */

@keyframes trs-label-highlight {
  0% { opacity: 0.5; transform: scale(0.95); }
  40% { opacity: 1; transform: scale(1.1); color: var(--theme-feedback-accent, #fbbf24); }
  100% { opacity: 1; transform: scale(1); }
}

.trs-feedback-label.trs-highlight {
  animation: trs-label-highlight 1s ease-out;
}

/* ============================================
   RESPONSIVE: Match mobile gap from two-row-scale.css
   ============================================ */

@media (max-width: 768px) {
  .trs-progressive[data-phase="1"] .slider-group-left {
    flex: 0 0 calc(400% / 7 - 0.75rem / 7);
  }

  .trs-progressive[data-phase="2"] .slider-group-left {
    flex: 0 0 calc(400% / 7 - 0.75rem / 7);
  }

  .trs-progressive[data-phase="3"] .slider-group-left {
    flex: 0 0 calc(400% / 7 - 0.75rem / 7);
  }

  .trs-progressive[data-phase="3"] .trs-feedback-group {
    max-width: calc(100% / 7 - 1.5rem / 7);
  }
}