/* Intake-form-only styles (the public case-submission form, body#intake_form).
   Loaded only on the intake pages via content_for :head in
   app/views/intake_form/{index,received}.html.erb. */

body#intake_form {
  margin: 0 auto;
  max-width: 900px;
}
form button.clear-btn {
  background: #f4f9f1;
  color: #294b24;
  margin-left: auto;
  border: 1px solid #cae2bd;
}

form button.clear-btn:hover {
  border-color: #c11e00;
  background: #ff8454;
  color: white;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2rem;
  column-gap: 0.6rem;
}

body#intake_form form {
  container-type: inline-size;
  margin-bottom: 4rem;
}

@container (max-width: 480px) {
  .navigation {
    justify-content: center;
  }
  button.clear-btn {
    margin-left: 0;
  }
}
.repeat-sender-notice, .existing-name-notice {
  padding: 0 1rem;
  margin-bottom: 1.5rem;
}

.repeat-sender-notice p, .existing-name-notice p {
  margin: 0
}

.existing-name-notice p {
  color: crimson;
}

.process-numbers-list {
  margin: .5rem 4px 0;
  line-height: 1.6;
  font-size: .9rem;
}

.process-numbers-list .process-number {
  margin: 2px 0 2px 6px;
}

.process-numbers-list .process-number .mono { font-family: ui-monospace, Menlo, monospace; }
.process-numbers-list .process-number .status { color: #333; }

.process-numbers-list .process-number.incomplete b { color: #777; }
.process-numbers-list .process-number.valid      b { color: #2d7a4f; }
.process-numbers-list .process-number.invalid    b { color: #dc2626; }