/* Request-an-invoice page. Everything here sits in flow: no fixed, sticky or absolutely positioned
   element is introduced by this page, and every control reaches the 44px floor through its own
   height. The homepage stylesheet supplies the shell, header, buttons and form fields. */

.eng-request .eng-intro .section-head h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.12;
}

.eng-request .eng-step {
  padding-top: 24px;
}

/* The selectable engagements. A label wraps the whole card, so the tap target is the card, and the
   native checkbox stays visible so the state is never only a colour. */
.eng-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.eng-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color var(--speed-fast) ease, transform var(--speed-fast) var(--ease-press);
}

.eng-option:hover,
.eng-option:focus-within {
  border-color: var(--border-strong);
}

.eng-option[data-selected="true"] {
  border-color: var(--rust);
  box-shadow: 0 0 0 1px var(--rust), var(--shadow);
}

.eng-option-input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--rust);
  cursor: pointer;
}

.eng-option-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.eng-option-title {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
}

.eng-option-summary,
.eng-option-note {
  color: var(--cream-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.eng-option-floor {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  color: var(--rust);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.eng-option-floor:hover,
.eng-option-floor:focus-visible {
  border-bottom-color: var(--rust);
}

/* Summary beside the form on a wide screen, above it on a phone. Both columns may shrink to zero,
   which is what keeps the page from scrolling sideways at 360px. */
.eng-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 32px;
  align-items: start;
}

.eng-summary {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.eng-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.eng-summary-list li {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rust);
  border-radius: var(--radius-sm);
}

.eng-summary-label {
  font-weight: 700;
}

.eng-summary-note {
  color: var(--cream-soft);
  font-size: 0.9rem;
}

.eng-summary-empty {
  color: var(--cream-soft);
  margin: 0;
}

.eng-summary-empty[hidden] {
  display: none;
}

/* The form. 16px type is stated in pixels: the homepage stylesheet leaves field type to inherit,
   and a phone zooms into anything smaller. */
.eng-request .eng-form {
  display: grid;
  gap: 18px;
  padding: 28px;
  min-width: 0;
}

.eng-request .eng-form h2 {
  margin: 0;
  font-size: 1.5rem;
}

.eng-request .audit-form input,
.eng-request .audit-form select,
.eng-request .audit-form textarea {
  font-size: 16px;
  min-height: 44px;
}

.eng-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.eng-field-row > label {
  flex: 1 1 200px;
  min-width: 0;
}

.form-status[data-tone="success"] {
  color: var(--green, #8fbf7a);
}

.form-status[data-tone="error"] {
  color: var(--rust);
}

@media (max-width: 900px) {
  .eng-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .eng-request .eng-form {
    padding: 20px;
  }
  .eng-field-row > label {
    flex-basis: 100%;
  }
}