@layer components {
  .session-page {
    display: grid;
    justify-items: center;
    align-items: start;
    min-block-size: 100dvh;
    padding: 15vh var(--inline-space) var(--block-space-double);
  }

  .session-card {
    background: var(--color-card);
    border-radius: 1.25rem;
    box-shadow:
      0 0 0 1px oklch(var(--lch-black) / 4%),
      0 4px 24px oklch(var(--lch-black) / 8%);
    inline-size: 100%;
    max-inline-size: 24rem;
    overflow: hidden;
  }

  .session-card__header {
    padding: var(--block-space-double) var(--inline-space-double);
    padding-block-end: var(--block-space);
    text-align: center;
  }

  .session-card__icon {
    --size: 4rem;

    align-items: center;
    background: linear-gradient(135deg, var(--color-primary-light), oklch(var(--lch-primary-light) / 60%));
    border-radius: 50%;
    block-size: var(--size);
    color: var(--color-primary);
    display: inline-flex;
    inline-size: var(--size);
    justify-content: center;
    margin-block-end: var(--block-space);

    svg {
      block-size: 2rem;
      inline-size: 2rem;
    }
  }

  .session-card__title {
    font-family: var(--font-display);
    font-size: var(--text-x-large);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
  }

  .session-card__subtitle {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    line-height: 1.5;
    margin: 0;

    strong {
      color: var(--color-ink);
      font-weight: 600;
    }
  }

  .session-card__form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: var(--block-space) var(--inline-space-double) var(--block-space-double);
  }

  .session-card__form--code {
    align-items: center;

    .btn {
      inline-size: 100%;
      max-inline-size: 14rem;
    }
  }

  .session-card__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    inline-size: 100%;
  }

  .session-card__label {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 500;
  }

  /* Special styling for the 6-digit code input */
  .session-card__code-input {
    background: var(--color-canvas);
    border: 2px solid var(--color-ink-lighter);
    border-radius: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--text-x-large);
    font-weight: 700;
    inline-size: 100%;
    letter-spacing: 0.5ch;
    max-inline-size: 14rem;
    padding: 0.75em 1em;
    text-align: center;
    text-transform: uppercase;
    transition: border-color 150ms ease, box-shadow 150ms ease;

    &::placeholder {
      color: var(--color-ink-light);
      font-weight: 400;
      letter-spacing: 0.3ch;
    }

    &:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px oklch(var(--lch-primary) / 15%);
      outline: none;
    }
  }

  .session-card__resend {
    color: var(--color-ink-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    font-size: var(--text-small);
    padding: 0 var(--inline-space-double) var(--block-space-double);
    text-align: center;

    /* button_to generates a form - make it inline */
    form {
      display: inline;
    }
  }

  .session-card__resend-link {
    background: none;
    border: none;
    color: var(--color-link);
    cursor: pointer;
    font-size: inherit;
    font-weight: 500;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;

    @media (any-hover: hover) {
      &:hover {
        text-decoration-thickness: 2px;
      }
    }
  }

  .session-card__footer {
    border-block-start: 1px solid var(--color-ink-lighter);
    padding: var(--block-space) var(--inline-space-double);
    text-align: center;

    p {
      color: var(--color-ink-dark);
      font-size: var(--text-small);
      margin: 0;

      a {
        color: var(--color-link);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 2px;

        @media (any-hover: hover) {
          &:hover {
            text-decoration-thickness: 2px;
          }
        }
      }
    }
  }

  /* Dark mode adjustments */
  html[data-theme="dark"] .session-card {
    box-shadow:
      0 0 0 1px oklch(var(--lch-white) / 5%),
      0 4px 32px oklch(var(--lch-black) / 30%);
  }

  html[data-theme="dark"] .session-card__code-input {
    background: var(--color-ink-lightest);

    &:focus {
      box-shadow: 0 0 0 3px oklch(var(--lch-primary) / 25%);
    }
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .session-card {
      box-shadow:
        0 0 0 1px oklch(var(--lch-white) / 5%),
        0 4px 32px oklch(var(--lch-black) / 30%);
    }

    html:not([data-theme]) .session-card__code-input {
      background: var(--color-ink-lightest);

      &:focus {
        box-shadow: 0 0 0 3px oklch(var(--lch-primary) / 25%);
      }
    }
  }
}