@layer components {
  .message-form {
    display: grid;
    gap: var(--space-m);
  }

  .message-form__decoy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .message-form__decoy input {
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
  }

  .message-form__fields {
    display: grid;
    gap: var(--space-m) var(--grid-gap);
  }

  .message-field {
    display: grid;
    align-content: start;
    min-width: 0;
  }

  .message-field__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin-bottom: 0.3rem;
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .message-field__optional {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    font-weight: var(--weight-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-muted);
  }

  .message-field__control {
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.125rem;
    border: 0;
    border-bottom: 1px solid var(--line-control);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    background: none;
    font-family: var(--font-text);
    font-size: var(--text-md);
    line-height: 1.4;
    color: var(--ink);
    transition: border-color var(--duration-fast) var(--ease-out-quart), background-color var(--duration-fast) var(--ease-out-quart);
  }

  .message-field__control::placeholder {
    color: var(--ink-muted);
  }

  .message-field__control--area {
    min-height: 8.5rem;
    padding-block: 0.6rem;
    line-height: 1.6;
    resize: none;
    field-sizing: content;
    max-height: 18rem;
  }

  .message-field__control:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  .message-field.is-invalid .message-field__control {
    border-bottom-color: var(--ink-error);
    background-color: var(--error-wash);
  }

  .message-field__hint {
    margin-top: 0.4rem;
    font-size: var(--text-2xs);
    line-height: 1.5;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  .message-field__error {
    margin-top: 0.4rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--ink-error);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--ink-error);
    text-wrap: pretty;
  }

  .message-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 62ch;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-soft);
    text-wrap: pretty;
    cursor: pointer;
  }

  .message-consent__text a {
    color: var(--ink);
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--line-strong), var(--line-strong));
    background-size: 0% 1px, 100% 1px;
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 0.125em;
    transition: background-size var(--duration-slow) var(--ease-out-expo);
  }

  .message-consent__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .message-consent__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border: 1px solid var(--line-control);
    border-radius: var(--radius-xs);
    transition: border-color var(--duration-fast) var(--ease-out-quart), background-color var(--duration-fast) var(--ease-out-quart);
  }

  .message-consent__mark .icon {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--ink-on-accent);
    opacity: 0;
    transform: scale(0.6);
  }

  .message-consent__input:checked + .message-consent__mark {
    border-color: var(--accent-strong);
    background-color: var(--accent-strong);
  }

  .message-consent__input:checked + .message-consent__mark .icon {
    opacity: 1;
    transform: none;
  }

  .message-consent__input:focus-visible + .message-consent__mark {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  .message-form__consent.is-invalid .message-consent__mark {
    border-color: var(--ink-error);
    background-color: var(--error-wash);
  }

  .message-form__captcha {
    container-type: inline-size;
    display: grid;
    justify-items: start;
  }

  .message-form__captcha-widget {
    min-block-size: 78px;
  }

  @container (max-width: 299px) {
    .message-form__captcha-widget {
      min-block-size: 144px;
    }
  }

  .no-js .message-form__captcha-widget,
  .message-form__captcha.is-unavailable .message-form__captcha-widget {
    display: none;
  }

  .message-form__captcha.is-invalid .message-form__captcha-widget > div {
    outline: 2px solid var(--ink-error);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }

  .message-form__captcha-note {
    max-width: 48ch;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .message-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
  }

  .message-form[aria-busy="true"] .message-form__foot .button {
    cursor: progress;
  }

  .message-form__note {
    flex: 1 1 22ch;
    max-width: 48ch;
    font-size: var(--text-2xs);
    line-height: 1.55;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  .message-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s);
    border-left: 2px solid var(--accent-strong);
    background-color: var(--accent-wash);
  }

  .message-note .icon {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
    color: var(--accent-strong);
  }

  .message-note__body {
    display: grid;
    gap: 0.2rem;
  }

  .message-note__title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-title);
    color: var(--ink);
  }

  .message-note__text {
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .message-note--failure {
    border-left-color: var(--ink-error);
    background-color: var(--error-wash);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-error);
    text-wrap: pretty;
  }

  .message-form--compact .message-field__control--area {
    min-height: 6.5rem;
  }

  @media (min-width: 40em) {
    .message-form__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message-field--wide {
      grid-column: 1 / -1;
    }
  }

  @media (hover: hover) {
    .message-consent__text a:hover {
      background-size: 100% 1px, 100% 1px;
    }

    .message-field__control:hover {
      border-bottom-color: var(--ink-soft);
    }

    .message-consent:hover .message-consent__mark {
      border-color: var(--accent-strong);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .message-consent__mark .icon {
      transition: opacity var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart);
    }
  }
}

@layer sections {
  .message-room__grid {
    display: grid;
    gap: var(--space-l) var(--grid-gap);
    align-items: start;
  }

  .message-room__lead {
    max-width: 42ch;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    line-height: 1.4;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .message-room__aside {
    max-width: 42ch;
    margin-top: var(--space-m);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  .message-room__panel {
    min-width: 0;
  }

  @media (min-width: 64em) {
    .message-room__grid {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: var(--space-2xl) var(--grid-gap);
    }

    .message-room__body {
      position: sticky;
      top: calc(var(--header-height) + var(--space-l));
    }
  }
}