@layer components {
  /* Split sign-in layout (layouts/public): brand panel left, flow right. The
     panel keeps its fixed dark ground in both themes; the content side follows
     the theme tokens. */

  /* The app body is a grid with sidebar/dock tracks and reserves navbar
     padding; the split layout wants the plain viewport. */
  body.session {
    display: block;
    padding: 0;
  }

  .session-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: 100dvh;
  }

  .session-mobile-brand {
    display: flex;
    padding: 1rem 1.5rem;
  }

  .session-mobile-brand img {
    block-size: 1.75rem;
    inline-size: auto;
  }

  .session-brand {
    display: none;
    --brand-accent: oklch(78% 0.1 155);
    /* Green-tinted near-black with a quiet glow anchoring the headline corner;
       fixed in both themes. */
    background:
      radial-gradient(48rem 34rem at 12% 112%, oklch(26% 0.05 155 / 0.5), transparent 65%),
      oklch(18% 0.015 155);
  }

  @media (min-width: 64rem) {
    .session-layout {
      grid-template-columns: minmax(24rem, 42%) 1fr;
    }

    .session-mobile-brand {
      display: none;
    }

    .session-brand {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 3rem;
      padding: 3.5rem;
    }
  }

  .session-brand__logo img {
    block-size: 2rem;
    inline-size: auto;
  }

  .session-brand__title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: oklch(100% 0 0);
  }

  .session-brand__title-accent {
    color: var(--brand-accent);
  }

  .session-brand__steps {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
  }

  .session-brand__step {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(62% 0.02 155);
  }

  .session-brand__step--accent {
    color: var(--brand-accent);
  }

  .session-brand__rule {
    inline-size: 0.875rem;
    block-size: 1px;
    background-color: oklch(38% 0.02 155);
  }

  .session-brand__footer {
    font-size: 0.8125rem;
    color: oklch(60% 0.015 155);
  }

  .session-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    /* The app's responsive tokens max out too large for the sign-in column. */
    --font-x-large-responsive: clamp(1.4rem, 3cqi, 1.75rem);
    --font-small-medium-responsive: clamp(0.85rem, 2cqi, 0.9375rem);
  }

  /* Short marketing-adjacent copy reads cleaner ragged than hyphenated
     (the reset turns hyphens on per element). */
  .session-content p {
    hyphens: manual;
  }

  /* The gray append box reads heavy on the split layout: flatten it. */
  .session-content .input-group__append {
    background: transparent;
  }

  /* The one-time code is the only content of its page, so it carries the
     weight the sign-in card gives its heading. */
  .session-code {
    padding-block: var(--space-xs);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
  }

  .session-divider {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    color: var(--color-ink-muted);
    font-size: var(--font-size-s);
  }

  .session-divider::before,
  .session-divider::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background-color: var(--color-gray-light);
  }
}