/* Simulation landing page + session stub — @layer split: theme (colors) + components (layout) */

/* Theme layer — colors, backgrounds, shadows only */
@layer theme {
  .simulation-landing-page {
    .landing-header {
      .industry-badge {
        background: oklch(from var(--accent-primary) l c h / 0.1);
        border-color: oklch(from var(--accent-primary) l c h / 0.2);
        color: var(--accent-primary);
      }

      .landing-description {
        color: var(--text-secondary);
      }
    }

    .info-card {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
      backdrop-filter: blur(12px);
      border-color: oklch(from var(--glass-tint) l c h / 0.08);

      .info-icon {
        color: var(--accent-primary);
      }

      .info-icon--duration {
        color: var(--color-info);
      }

      .info-label {
        color: var(--text-secondary);
      }

      .info-sub {
        color: var(--text-secondary);
      }
    }

    .skills-section {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
      backdrop-filter: blur(12px);
      border-color: oklch(from var(--glass-tint) l c h / 0.08);

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

      .skill-chip {
        background: oklch(from var(--accent-primary) l c h / 0.1);
        border-color: oklch(from var(--accent-primary) l c h / 0.2);
        color: var(--accent-primary);
      }
    }

    .background-section {
      .section-label {
        color: var(--text-secondary);
      }

      .background-detail {
        background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
        backdrop-filter: blur(12px);
        border-color: oklch(from var(--glass-tint) l c h / 0.08);

        &[open] {
          border-color: oklch(from var(--accent-primary) l c h / 0.2);
        }

        summary {
          &::after {
            border-inline-end-color: var(--text-secondary);
            border-block-end-color: var(--text-secondary);
          }

          .detail-icon {
            color: var(--accent-primary);
          }
        }

        .detail-content p {
          color: var(--text-secondary);
        }

        .step-item {
          .step-number {
            background: oklch(from var(--accent-primary) l c h / 0.15);
            border-color: oklch(from var(--accent-primary) l c h / 0.25);
            color: var(--accent-primary);
          }

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

    .disclaimer-card {
      background: light-dark(oklch(75% 0.15 85 / 0.08), oklch(75% 0.15 85 / 0.06));
      border-color: light-dark(oklch(75% 0.15 85 / 0.2), oklch(75% 0.15 85 / 0.15));

      .disclaimer-icon {
        background: light-dark(oklch(75% 0.15 85 / 0.15), oklch(75% 0.15 85 / 0.12));
        color: light-dark(oklch(55% 0.18 85), oklch(75% 0.15 85));
      }

      h3 {
        color: light-dark(oklch(55% 0.18 85), oklch(75% 0.15 85));
      }

      p {
        color: light-dark(oklch(45% 0.1 85), oklch(80% 0.1 85 / 0.8));
      }
    }

    .landing-actions {
      .back-link {
        color: var(--text-secondary);

        &:hover {
          color: var(--text-primary);
        }
      }
    }

    .error-state {
      svg {
        color: var(--color-error);
      }

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

  /* Session stub theme */
  .simulation-session-page {
    .session-stub {
      .stub-icon {
        background: oklch(from var(--accent-primary) l c h / 0.1);
        border-color: oklch(from var(--accent-primary) l c h / 0.2);
        color: var(--accent-primary);
      }

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

/* Components layer — layout, sizing, spacing only */
@layer components {
  .simulation-landing-page {
    position: relative;
    max-inline-size: min(1100px, 100% - 2rem);
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-lg);

    /* Header — centered */
    .landing-header {
      position: relative;
      z-index: 1;
      text-align: center;
      margin-block-end: var(--space-2xl);

      .industry-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 100px;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
        border: 1px solid;
        margin-block-end: var(--space-lg);
      }

      h1 {
        font-family: var(--font-heading);
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        font-weight: var(--fw-bold);
        letter-spacing: -0.02em;
        margin-block-end: var(--space-md);
      }

      .landing-description {
        font-size: var(--fs-large);
        max-inline-size: 600px;
        margin-inline: auto;
        line-height: 1.7;
      }
    }

    /* Info cards — 3 column grid */
    .info-cards {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-lg);
      margin-block-end: var(--space-xl);
    }

    .info-card {
      border-radius: 16px;
      border: 1px solid;
      padding: var(--space-xl);
      text-align: center;

      .info-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
        margin-block-end: var(--space-sm);
      }

      .info-label {
        font-size: var(--fs-xsmall);
        margin-block-end: 4px;
        font-weight: var(--fw-regular);
      }

      .info-value {
        font-family: var(--font-heading);
        font-size: var(--fs-large);
        font-weight: var(--fw-semibold);
        text-transform: capitalize;
      }

      .info-sub {
        font-size: var(--fs-xxsmall);
        opacity: 0.7;
        margin-block-start: 4px;
      }
    }

    /* Skills section */
    .skills-section {
      position: relative;
      z-index: 1;
      border-radius: 16px;
      border: 1px solid;
      padding: var(--space-xl);
      margin-block-end: var(--space-xl);

      .section-label {
        font-size: var(--fs-xsmall);
        margin-block-end: var(--space-md);
        font-weight: var(--fw-regular);
      }

      .skills-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .skill-chip {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
        border: 1px solid;
      }
    }

    /* Background section — details elements */
    .background-section {
      position: relative;
      z-index: 1;
      margin-block-end: var(--space-xl);

      .section-label {
        font-size: var(--fs-xsmall);
        margin-block-end: var(--space-md);
        font-weight: var(--fw-regular);
      }

      .background-detail {
        border-radius: 12px;
        border: 1px solid;
        margin-block-end: var(--space-sm);
        overflow: hidden;
        transition: border-color 0.2s ease;

        summary {
          display: flex;
          align-items: center;
          gap: var(--space-sm);
          padding: var(--space-md) var(--space-lg);
          cursor: pointer;
          font-family: var(--font-heading);
          font-weight: var(--fw-semibold);
          font-size: var(--fs-small);
          list-style: none;
          user-select: none;

          &::-webkit-details-marker {
            display: none;
          }

          &::after {
            content: '';
            margin-inline-start: auto;
            inline-size: 8px;
            block-size: 8px;
            border-inline-end: 2px solid;
            border-block-end: 2px solid;
            transform: rotate(-45deg);
            transition: transform 0.2s ease;
          }

          .detail-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }
        }

        &[open] summary::after {
          transform: rotate(45deg);
        }

        .detail-content {
          padding: 0 var(--space-lg) var(--space-lg);

          p {
            line-height: 1.7;
            white-space: pre-wrap;
          }
        }

        .steps-list {
          display: flex;
          flex-direction: column;
          gap: var(--space-md);
        }

        .step-item {
          display: flex;
          gap: var(--space-md);
          align-items: flex-start;

          .step-number {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            inline-size: 28px;
            block-size: 28px;
            border-radius: 50%;
            font-size: var(--fs-xsmall);
            font-weight: var(--fw-semibold);
            border: 1px solid;
          }

          p {
            line-height: 1.6;
            padding-block-start: 3px;
          }
        }
      }
    }

    /* Disclaimer card */
    .disclaimer-card {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      gap: var(--space-lg);
      padding: var(--space-lg);
      border-radius: 16px;
      border: 1px solid;
      margin-block-end: var(--space-2xl);

      .disclaimer-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        inline-size: 40px;
        block-size: 40px;
        border-radius: 10px;
      }

      h3 {
        font-family: var(--font-heading);
        font-weight: var(--fw-semibold);
        font-size: var(--fs-small);
        margin-block-end: 4px;
      }

      p {
        font-size: var(--fs-xsmall);
        line-height: 1.6;
      }
    }

    /* Action buttons */
    .landing-actions {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-md);

      .start-button {
        font-size: var(--fs-large);
        padding: var(--space-md) var(--space-2xl);
      }

      .back-link {
        font-size: var(--fs-xsmall);
        text-decoration: none;
      }
    }

    /* Error state */
    .error-state {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: var(--space-3xl) var(--space-xl);

      svg {
        margin-inline: auto;
        margin-block-end: var(--space-lg);
      }

      h2 {
        font-family: var(--font-heading);
        font-size: var(--fs-xl);
        font-weight: var(--fw-semibold);
        margin-block-end: var(--space-sm);
      }

      p {
        margin-block-end: var(--space-lg);
      }
    }
  }

  /* Session stub page */
  .simulation-session-page {
    position: relative;
    min-block-size: calc(100dvb - 80px);
    display: flex;
    align-items: center;
    justify-content: center;

    .session-stub {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: var(--space-3xl) var(--space-xl);

      .stub-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 80px;
        block-size: 80px;
        margin-inline: auto;
        margin-block-end: var(--space-lg);
        border-radius: 50%;
        border: 1px solid;
      }

      h1 {
        font-family: var(--font-heading);
        font-size: var(--fs-xxl);
        font-weight: var(--fw-bold);
        margin-block-end: var(--space-sm);
      }

      p {
        font-size: var(--fs-small);
        margin-block-end: var(--space-xl);
      }
    }
  }

  /* Responsive */
  @media (max-width: 640px) {
    .simulation-landing-page {
      padding: var(--space-lg) var(--space-md);

      .info-cards {
        grid-template-columns: 1fr;
      }

      .disclaimer-card {
        flex-direction: column;
        text-align: center;

        .disclaimer-icon {
          margin-inline: auto;
        }
      }
    }
  }
}