/* Feedback page — post-simulation survey */

/* Theme layer — colors only */
@layer theme {
  .feedback-page {
    .feedback-loading {
      color: var(--text-secondary);
    }

    .loading-spinner {
      border-color: oklch(from var(--accent-primary) l c h / 0.2);
      border-block-start-color: var(--accent-primary);
    }

    .feedback-brand {
      color: var(--accent-primary);
    }

    .feedback-header p {
      color: var(--text-secondary);
    }

    .feedback-section-title {
      color: var(--text-secondary);
    }

    .feedback-question {
      background: none;
      border-color: transparent;
    }

    .feedback-question .question-text,
    .feedback-question > label {
      color: var(--text-primary);
    }

    /* Rating pills */
    .rating-options input[type='radio'] + span {
      border-color: oklch(from var(--glass-tint) l c h / 0.15);
      color: var(--text-secondary);
    }

    .rating-options input[type='radio'] + span:hover {
      border-color: oklch(from var(--accent-primary) l c h / 0.5);
      color: var(--text-primary);
      background: oklch(from var(--accent-primary) l c h / 0.08);
    }

    .rating-options input[type='radio']:checked + span {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: oklch(100% 0 0);
    }

    /* Textareas */
    .feedback-form textarea {
      background: oklch(from var(--glass-tint) l c h / 0.04);
      border-color: oklch(from var(--glass-tint) l c h / 0.12);
      color: var(--text-primary);

      &::placeholder {
        color: oklch(from var(--text-secondary) l c h / 0.5);
      }

      &:focus {
        border-color: oklch(from var(--accent-primary) l c h / 0.5);
        outline: none;
      }
    }

    /* Error */
    .feedback-error {
      color: oklch(65% 0.2 25);
      background: oklch(65% 0.2 25 / 0.1);
      border-color: oklch(65% 0.2 25 / 0.2);
    }

    /* Completion states */
    .feedback-thanks .complete-icon,
    .feedback-already .complete-icon {
      color: oklch(55% 0.18 145);
    }

    .feedback-thanks p,
    .feedback-already p {
      color: var(--text-secondary);
    }
  }
}

/* Layout layer */
@layer components {
  .feedback-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-block-size: 100dvh;
    padding: var(--space-2xl) var(--space-md);

    /* Loading */
    .feedback-loading {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-md);
      flex: 1;
    }

    .feedback-loading:not([hidden]) {
      display: flex;
    }

    .loading-spinner {
      inline-size: 40px;
      block-size: 40px;
      border-radius: 50%;
      border: 3px solid;
      animation: spin 0.8s linear infinite;
    }

    /* Container */
    .feedback-container {
      inline-size: 100%;
      max-inline-size: 640px;
    }

    /* Header */
    .feedback-header {
      text-align: center;
      margin-block-end: var(--space-xl);
    }

    .feedback-brand {
      display: inline-block;
      font-family: var(--font-display, 'Outfit', sans-serif);
      font-size: var(--fs-xsmall, 0.75rem);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-block-end: var(--space-sm);
    }

    .feedback-header h1 {
      margin-block-end: var(--space-xs);
    }

    /* Sections */
    .feedback-section {
      margin-block-end: var(--space-lg);
    }

    .feedback-section-title {
      font-size: var(--fs-small, 0.875rem);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-block-end: var(--space-md);
    }

    /* Question card */
    .feedback-question {
      margin-block-end: var(--space-lg);
    }

    .feedback-question .question-text,
    .feedback-question > label {
      display: block;
      font-weight: 500;
      margin: 0 0 var(--space-sm, 8px) 0;
    }

    /* Rating pills */
    .rating-options {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    .rating-options label {
      cursor: pointer;
    }

    .rating-options input[type='radio'] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .rating-options input[type='radio'] + span {
      display: inline-block;
      padding: var(--space-xs, 6px) var(--space-sm, 12px);
      border-radius: 100px;
      border: 1px solid;
      font-size: var(--fs-small, 0.875rem);
      transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
      user-select: none;
    }

    .rating-options input[type='radio']:focus-visible + span {
      outline: 2px solid var(--accent-primary);
      outline-offset: 2px;
    }

    /* Textareas */
    .feedback-form textarea {
      inline-size: 100%;
      border: 1px solid;
      border-radius: var(--radius-sm, 8px);
      padding: var(--space-sm);
      font-family: inherit;
      font-size: var(--fs-body, 1rem);
      resize: vertical;
      transition: border-color 0.15s;
    }

    /* Error */
    .feedback-error {
      border: 1px solid;
      border-radius: var(--radius-sm, 8px);
      padding: var(--space-sm) var(--space-md);
      margin-block-end: var(--space-md);
      font-size: var(--fs-small, 0.875rem);
    }

    /* Submit */
    .feedback-submit {
      inline-size: 100%;
      justify-content: center;
    }

    /* Thank you / Already submitted states */
    .feedback-thanks,
    .feedback-already {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-md);
      flex: 1;
      text-align: center;
      padding: var(--space-2xl);
    }

    .feedback-thanks:not([hidden]),
    .feedback-already:not([hidden]) {
      display: flex;
    }

    .complete-icon {
      margin-block-end: var(--space-sm);
    }
  }

  @keyframes spin {
    to {
      rotate: 360deg;
    }
  }
}