@layer components {

.mail-instructions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.host-mail-instructions-modal .modal__content {
  max-width: 40rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-subtle) 92%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--color-surface) 82%, var(--color-surface-subtle)) 100%
  );
  border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.host-mail-instructions-modal .modal__body {
  padding: var(--space-5);
  background: transparent;
}

.host-mail-instructions-modal .mail-instructions__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

.mail-instructions__notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-weight: 600;
}

.mail-instructions__view,
.mail-instructions__edit,
.mail-instructions__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mail-instructions__section,
.mail-wizard-instructions {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface-raised) 95%, transparent);
}

.mail-wizard-instructions__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mail-instructions__section-title,
.mail-wizard-instructions__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

.mail-instructions__body,
.mail-wizard-instructions__body {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.mail-instructions__body p,
.mail-wizard-instructions__body p {
  margin: 0;
}

.mail-instructions__body p + p,
.mail-wizard-instructions__body p + p {
  margin-top: var(--space-2);
}

.mail-instructions__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mail-instructions__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 86%, var(--color-surface-subtle)) 0%,
    color-mix(in srgb, var(--color-surface-subtle) 92%, var(--color-bg)) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
    0 10px 24px color-mix(in srgb, var(--color-text) 5%, transparent);
}

.mail-instructions__field--retrieval {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border-subtle));
}

.mail-instructions__field--storage {
  border-color: color-mix(in srgb, var(--color-success) 18%, var(--color-border-subtle));
}

.mail-instructions__field-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mail-instructions__field label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}

.mail-instructions__field-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.mail-instructions__view-actions,
.mail-instructions-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mail-instructions-form__actions {
  justify-content: flex-end;
}

.mail-instructions-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.mail-instructions-form .form-group {
  margin-bottom: 0;
}

.mail-instructions-form__input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 9rem;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, var(--color-border-subtle));
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  background: color-mix(in srgb, var(--color-surface) 72%, var(--color-bg));
  color: var(--color-text);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--color-text) 4%, transparent),
    0 1px 0 color-mix(in srgb, white 55%, transparent);
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    background var(--duration-fast) var(--ease-default);
}

.mail-instructions-form__input:hover {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-bg));
}

.mail-instructions-form__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--color-text) 4%, transparent),
    0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.mail-instructions-form__input::placeholder {
  color: var(--color-text-muted);
}

.mail-wizard-instructions--retrieval {
  border-color: color-mix(in srgb, var(--color-info) 24%, var(--color-border-subtle));
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-info) 7%, var(--color-surface)) 0%, var(--color-surface) 100%);
}

.mail-wizard-instructions--storage {
  border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border-subtle));
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 7%, var(--color-surface)) 0%, var(--color-surface) 100%);
}

@media (max-width: 40rem) {
  .mail-instructions__view-actions,
  .mail-instructions-form__actions {
    flex-direction: column;
  }

  .mail-instructions__view-actions .btn,
  .mail-instructions-form__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .host-mail-instructions-modal .modal__content {
    max-width: 100%;
  }

  .host-mail-instructions-modal .modal__body {
    padding: var(--space-4);
  }
}

}