@layer components {
  .session-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--page-gutter);
  }

  .session-container {
    width: 100%;
    max-width: 24rem;
    text-align: center;
  }

  .session-logo {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--color-ink);
    text-decoration: none;
    display: block;
    margin-block-end: var(--space-12);
  }

  .session-heading {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-block-end: var(--space-2);
  }

  .session-hint {
    font-family: var(--font-body);
    color: var(--color-muted);
    margin-block-end: var(--space-8);
  }

  .session-hint--spaced {
    margin-block-start: var(--space-6);
  }

  .session-alert {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-accent);
    background: var(--color-accent-wash);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-6);
  }

  .session-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .session-form__input {
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    border: var(--border-strong);
    background: var(--color-paper);
    color: var(--color-ink);
    text-align: center;
    &:focus-visible {
      border-color: var(--color-accent);
    }
  }

  .session-form__input--code {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    letter-spacing: 0.3em;
    padding: var(--space-4);
  }

  /* New-site address field — one URL, composed centred.
     The bordered container matches `.session-form__input` so the row reads
     identically alongside the other fields. Both halves sit in the centre
     at the same weight and colour; the input grows and shrinks with its
     content via `field-sizing: content` so the composed URL never stretches
     across an awkward gap. The editable region is signalled by the cursor
     and a faint dotted underline under just the input — no colour split. */
  .session-form__address {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    border: var(--border-strong);
    background: var(--color-paper);
    color: var(--color-ink);
    &:focus-within {
      border-color: var(--color-accent);
    }
  }

  .session-form__address-input {
    field-sizing: content;
    min-width: 6ch;
    max-width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    text-decoration: underline dotted;
    text-decoration-color: var(--color-muted);
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
    &::placeholder {
      color: var(--color-muted);
    }
    &:focus {
      outline: none;
      text-decoration-color: var(--color-ink);
    }
  }

  .session-form__address-suffix {
    flex: 0 0 auto;
    color: var(--color-ink);
    user-select: none;
    white-space: nowrap;
  }

  /* Status line under the address field. Quiet, italic, single source of
     truth for live feedback. Reserved height keeps the form from shifting
     when feedback arrives. */
  .session-form__status {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-muted);
    min-height: 1.5em;
    margin-block-start: calc(-1 * var(--space-2));
    text-align: center;
    &[data-status="available"] {
      color: var(--color-ink);
    }
    &[data-status="taken"],
    &[data-status="reserved"],
    &[data-status="malformed"],
    &[data-status="error"] {
      color: var(--color-accent);
    }
  }

  .session-form__button {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-6);
    background: var(--color-ink);
    color: var(--color-paper);
    border: none;
    cursor: pointer;
    transition: opacity 150ms ease;

    &:hover {
      opacity: 0.85;
    }
  }

  .session-dev-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-block-start: var(--space-8);
    padding: var(--space-3);
    border: 1px dashed var(--color-rule);
  }
}