/* The 1DB form script injects unlayered defaults, and an unlayered rule beats any layered one.
   Everything that styles the form therefore lives here, outside every layer. */
lead-form, .sheet-form {
  --lf-accent: var(--accent); --lf-radius: 0; --lf-gap: .9rem; --lf-error: #8a1c1c;
  color: var(--ink);
}
lead-form { display: block; margin-top: 1rem; max-width: 46rem; background: var(--bg); padding: 1.1rem; border: 1px solid var(--ink); }
.quote-form lead-form { margin-top: 0; }

lead-form .lf-input, .sheet-form .lf-input {
  border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink);
  padding: .55rem .65rem; width: 100%; min-height: 2.75rem;
}
lead-form textarea.lf-input, .sheet-form textarea.lf-input { min-height: 6rem; }
lead-form .lf-input:focus-visible, .sheet-form .lf-input:focus-visible,
lead-form .lf-button:focus-visible, .sheet-form .lf-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
lead-form .lf-label, lead-form legend, .sheet-form .lf-label { font-weight: 800; }
lead-form legend { font-size: 1rem; letter-spacing: 0; text-transform: none; padding: 0 0 .25rem; }
lead-form .lf-req, .sheet-form .lf-req { display: inline; color: var(--lf-error); }
lead-form .lf-error, .sheet-form .lf-error { color: var(--lf-error); }
lead-form .lf-check { accent-color: var(--accent); }
lead-form .lf-check-label { font-weight: 400; }

lead-form .lf-button, .sheet-form .lf-button {
  background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--accent); border-radius: 0;
  padding: .75rem 1.5rem; font-weight: 800; cursor: pointer; min-height: 2.75rem;
}
lead-form .lf-button:hover, .sheet-form .lf-button:hover { background: #0a4753; border-color: #0a4753; }
lead-form .lf-button.lf-secondary { background: transparent; color: var(--accent); }
lead-form .lf-button.lf-secondary:hover { background: var(--surface); }

/* Two columns from tablet width. The step is the grid; the title, progress, choice groups, long
   fields, status and the actions row span both columns. */
@media (min-width: 40rem) {
  lead-form .lf-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lf-gap) 1.4rem; align-items: start; }
  lead-form .lf-step > fieldset.lf-field, lead-form .lf-step > .lf-title, lead-form .lf-step > .lf-progress,
  lead-form .lf-step > .lf-status, lead-form .lf-step > .lf-hp, lead-form .lf-step > .lf-success,
  lead-form .lf-step > .lf-field:has(textarea) { grid-column: 1 / -1; }
}
lead-form .lf-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Enhance form on the grade sheet */
.sheet-form { display: grid; gap: .9rem; }
.sheet-form .wide { grid-column: 1 / -1; }
@media (min-width: 40rem) { .sheet-form { grid-template-columns: 1fr 1fr; } }
.sheet-form .lf-field { font-weight: 700; display: flex; flex-direction: column; gap: .35rem; }
.sheet-form [data-lead-status] { grid-column: 1 / -1; }
.sheet-form .lf-button { justify-self: start; }

/* Required request type, the first question of the grade sheet's form */
.sheet-form fieldset.lf-choice { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .5rem; }
.sheet-form fieldset.lf-choice legend { padding: 0 0 .25rem; }
.sheet-form .lf-check-label { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; min-width: 0; }
.sheet-form .lf-check-label span { min-width: 0; overflow-wrap: anywhere; }
.sheet-form input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; flex: none; accent-color: var(--accent); margin: .1rem 0 0; }