/*
 * The learning path: a "what next" hero, then sections holding ordered practice steps and
 * a final challenge. A step node is locked, available or practised. Practised uses the
 * practice colour and a ball/check; stars never appear here (they are coach-awarded only).
 */
@layer components {
  [data-theme] {
    .next-action {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-4);
      padding: var(--space-5);
      border-radius: var(--radius-card);
      background: var(--color-brand);
      box-shadow: 0 var(--button-edge) 0 var(--color-brand-strong);
      color: var(--color-on-brand);

      :where(h2) {
        font-size: var(--title-3);
      }

      :where(a:not(.btn)) {
        color: inherit;
      }

      .btn {
        --btn-bg: var(--color-reward);
        --btn-fg: var(--color-on-reward);
        --btn-border: var(--color-reward);
        --btn-edge: var(--color-reward-strong);
      }
    }

    .path {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      padding: 0;
      list-style: none;
    }

    .path-section--locked {
      background: var(--color-surface-sunken);
      box-shadow: none;
      color: var(--color-text-muted);
    }

    .steps {
      display: flex;
      flex-direction: column;
      padding: 0;
      list-style: none;
    }

    .step {
      --node-size: 2.75rem;
      --node-bg: var(--color-surface-sunken);
      --node-fg: var(--color-text-muted);
      --node-border: var(--color-border-strong);

      position: relative;
      display: grid;
      grid-template-columns: var(--node-size) 1fr;
      align-items: center;
      gap: var(--space-1) var(--space-3);
      padding-block: var(--space-2);

      /* Connector to the next node. */
      &:not(:last-child)::before {
        content: "";
        position: absolute;
        top: calc(var(--space-2) + var(--node-size));
        bottom: calc(-1 * var(--space-2));
        left: calc(var(--node-size) / 2 - 2px);
        width: 4px;
        border-radius: var(--radius-full);
        background: var(--color-border);
      }

      @media (min-width: 40rem) {
        grid-template-columns: var(--node-size) 1fr auto;
      }
    }

    .step__node {
      display: grid;
      place-items: center;
      width: var(--node-size);
      height: var(--node-size);
      border: var(--border-width) solid var(--node-border);
      border-radius: var(--radius-full);
      background: var(--node-bg);
      color: var(--node-fg);

      .icon {
        --icon-size: 1.35rem;
        vertical-align: 0;
      }
    }

    .step__body {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .step__title {
      font-family: var(--font-display);
      font-weight: var(--weight-display);
      line-height: var(--leading-snug);
    }

    .step__state {
      color: var(--color-text-muted);
      font-size: var(--text-sm);
    }

    .step__action {
      grid-column: 2;
      justify-self: start;

      @media (min-width: 40rem) {
        grid-column: 3;
      }
    }

    .step--available {
      --node-bg: var(--color-brand);
      --node-fg: var(--color-on-brand);
      --node-border: var(--color-brand-strong);
    }

    .step--practised {
      --node-bg: var(--color-practice);
      --node-fg: var(--color-on-practice);
      --node-border: var(--color-practice);

      &:not(:last-child)::before {
        background: var(--color-practice);
      }
    }

    .step--locked .step__title {
      color: var(--color-text-muted);
    }

    /* The section's final challenge: where the coach awards stars. */
    .challenge-gate {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: var(--space-4);
      border: var(--border-width) solid var(--color-reward-strong);
      border-radius: var(--radius-control);
      background: var(--color-reward-soft);

      :where(h4) {
        display: flex;
        align-items: center;
        gap: var(--space-2);
      }
    }

    .challenge-gate--locked {
      border-style: dashed;
      border-color: var(--color-border-strong);
      background: transparent;
      color: var(--color-text-muted);
    }
  }
}