/* What a form looks like on the public sites and portals. Each layout links this after dg_head_tags
   and before its site stylesheet, so a page's own rules still win. The admin never loads it.
   A form sits on a panel set apart from the page. On that panel a text input or select stays
   dg-design's underline, and a textarea is a box. An underline shows only the bottom of its input, so
   with no fill a label reads closest to the line above it; the fill is what pairs a label with its field.
   Every value comes from the role colors, so it follows site and theme. Upstream candidate for dg-design
   as a form-panel token set. */
/* dg-exception: the raised panel and its edge, defined once for every public form. */
:root {
  --public-form-panel: light-dark(
    color-mix(in srgb, var(--dg-text) 5%, var(--dg-bg)),
    color-mix(in srgb, var(--dg-text) 6%, var(--dg-bg))
  );
  --public-form-edge: color-mix(in srgb, var(--dg-text) 32%, var(--dg-bg));
  --public-form-danger: color-mix(in srgb, var(--dg-danger) 72%, var(--dg-text));
  --public-form-muted: color-mix(in srgb, var(--dg-text-muted) 75%, var(--dg-text));
  --public-form-fill: light-dark(
    color-mix(in srgb, var(--dg-surface) 80%, var(--public-form-panel)),
    color-mix(in srgb, var(--dg-bg) 60%, var(--public-form-panel))
  );
  --public-form-line: color-mix(in srgb, var(--dg-text) 58%, var(--public-form-panel));
  --public-form-placeholder: light-dark(
    color-mix(in srgb, var(--dg-text) 62%, var(--public-form-fill)),
    color-mix(in srgb, var(--dg-text) 54%, var(--public-form-fill))
  );
  --public-form-field-gap: var(--dg-space-5);
  --public-form-group-gap: var(--dg-space-8);
}

/* dg-exception: on a phone the same rhythm steps down one size, so a stack of fields stays short. */
@media (max-width: 767px) {
  :root {
    --public-form-field-gap: var(--dg-space-4);
    --public-form-group-gap: var(--dg-space-6);
  }
}
/* dg-exception: any card, panel or modal holding a control is a form panel. Children read its hairline,
   danger and muted roles, so their rules, boxed choices, hints and placeholders stay crisp without page rules. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark):has(:is(input:not([type=hidden]), select, textarea)) {
  --dg-border: var(--public-form-edge);
  --dg-danger: var(--public-form-danger);
  --dg-text-muted: var(--public-form-muted);
  --bs-secondary-color: var(--public-form-muted);
  border-color: var(--public-form-edge);
  background: var(--public-form-panel);
}

/* dg-exception: a form modal's head takes the panel, not the surface it would otherwise keep. */
.dg-modal:has(:is(input:not([type=hidden]), select, textarea)) > .dg-modal__head {
  background: var(--public-form-panel);
}

/* dg-exception: an empty field must look empty beside a filled one, in every kind of field. */
.dg-field__input::placeholder {
  color: var(--public-form-placeholder);
  font-weight: 400;
  opacity: 1;
}

/* dg-exception: focus marks the underline and keeps the field clear. Bootstrap's focus rule repaints the fill with the page color. */
.dg-field__input:not(textarea):focus {
  background-color: transparent;
}

/* dg-exception: on a panel an input is a target: a faint fill above its line, with the entered text strong against the placeholder. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) .dg-field__input:not(textarea, [type=checkbox], [type=radio], [type=file]),
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) .dg-field__control {
  min-height: 40px;
  padding-block: var(--dg-space-2) 7px;
  padding-inline: var(--dg-space-3);
  border-bottom-color: var(--public-form-line);
  background-color: var(--public-form-fill);
  font-weight: 500;
  text-overflow: ellipsis;
}

/* dg-exception: on a phone a field in a two-column row needs its width for the answer, so the inset shrinks. */
@media (max-width: 767px) {
  :is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) .dg-field__input:not(textarea, [type=checkbox], [type=radio], [type=file]) {
    padding-inline: var(--dg-space-2);
  }
}
/* dg-exception: the fill stays put on focus; only the line changes. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) .dg-field__input:not(textarea, [type=checkbox], [type=radio], [type=file]):focus {
  border-bottom-color: var(--dg-action);
  background-color: var(--public-form-fill);
}

/* dg-exception: the danger line outranks the quiet one. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) :is(.is-invalid, [aria-invalid=true]).dg-field__input:not(textarea) {
  border-bottom-color: var(--dg-danger);
}

/* dg-exception: the chevron sits inside the fill. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) select.dg-field__input {
  padding-right: var(--dg-space-8);
  background-position: right var(--dg-space-3) center;
}

/* dg-exception: a prefixed field draws its fill and line on the wrapper. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) .dg-field__control .dg-field__input {
  min-height: 0;
  padding: 0;
  background: none;
}

/* dg-exception: a textarea is a box in every state; upstream candidate for dg-design. */
textarea.dg-field__input {
  padding: var(--dg-space-3);
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  background-color: var(--dg-surface);
  caret-color: var(--dg-action);
}

/* dg-exception: on a panel the box takes the same fill and line as the inputs around it, so they read as one family. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) textarea.dg-field__input {
  border-color: var(--public-form-line);
  background-color: var(--public-form-fill);
  font-weight: 500;
}

/* dg-exception: a hint under a textarea box stands clear of its edge. */
textarea.dg-field__input + .dg-field__hint {
  margin-top: var(--dg-space-1);
}

/* dg-exception: the textarea box focuses in the action color and keeps its fill. */
textarea.dg-field__input:focus {
  border-color: var(--dg-action);
  background-color: var(--dg-surface);
  box-shadow: 0 0 0 1px var(--dg-action);
}

/* dg-exception: on a panel the box keeps the panel's fill on focus. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card):not(.dg-card--dark) textarea.dg-field__input:focus {
  border-color: var(--dg-action);
  background-color: var(--public-form-fill);
}

/* dg-exception: the textarea box's error state. */
.dg-field--error textarea.dg-field__input {
  border-color: var(--dg-danger);
  box-shadow: 0 0 0 1px var(--dg-danger);
}

/* dg-exception: a browser's autofill paints its own box behind a field; the delay holds that off and the text keeps its color. */
.dg-field__input:is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: var(--dg-text);
  caret-color: var(--dg-text);
  filter: none;
  transition: background-color 600000s 0s;
}

/* dg-exception: Bootstrap's invalid state becomes the same danger underline as dg-design's. */
:is(.is-invalid, [aria-invalid=true]).dg-field__input:not(textarea) {
  border-bottom-color: var(--dg-danger);
  box-shadow: 0 1px 0 0 var(--dg-danger);
}

/* dg-exception: Bootstrap's invalid text input carries a warning icon the underline does not need. */
input.is-invalid.dg-field__input {
  padding-right: 0;
  background-image: none;
}

/* dg-exception: the error line reads at full contrast on a panel. */
:is(.dg-field__error, .invalid-feedback) {
  color: var(--dg-danger);
}

/* dg-exception: a label takes its own line, so the strut of an inline label cannot push its field lower than its neighbor's. */
label.form-label {
  display: block;
}

/* dg-exception: a label sits the same distance above its field whether it wraps the input or precedes it, so rows share a baseline. */
label.form-label:has(> :is(input, select, textarea)) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0;
}

/* dg-exception: an "optional" tag in another type size must not make its label line taller than its neighbors'. */
:is(.dg-field__label, .form-label) > :is(span, small) {
  line-height: 1;
}

/* dg-exception: Mapbox's element wraps the address input; as a block it adds no inline gap and the input fills it. */
mapbox-address-autofill {
  display: block;
}

/* dg-exception: a label sits tight on its own field and carries more weight than a hint. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) :is(.dg-field__label, label.form-label) {
  margin-bottom: var(--dg-space-1);
  font-weight: 600;
  line-height: 20px;
}

/* dg-exception: the same tight gap when the label wraps its input or sits in a dg_field. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) label.form-label:has(> :is(input, select, textarea)) {
  gap: var(--dg-space-1);
  margin-bottom: 0;
}

/* dg-exception: a dg_field holds its label, field and hint close together. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) .dg-field {
  gap: var(--dg-space-1);
}

/* dg-exception: that gap is the whole distance; the label adds no margin of its own. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) .dg-field > .dg-field__label {
  margin-bottom: 0;
}

/* dg-exception: labels and hints share one type family; the serif stays with the page's prose. */
:is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) :is(.dg-field__hint, .form-text, .dg-muted, .dg-check__hint, .dg-fieldset__hint, .first-conv__form-sub) {
  font-family: var(--dg-font-sans);
}

/* dg-exception: fields stand well apart, so a label pairs with its own field and not the one above. */
.dg-page :is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) :is(.dg-fieldset, .wo-grid, .tenants-fields, .lawn-lines) {
  row-gap: var(--public-form-field-gap);
}

/* dg-exception: Bootstrap's rows take the same gap between fields. */
.dg-page :is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) .row {
  --bs-gutter-y: var(--public-form-field-gap);
}

/* dg-exception: groups stand further apart than the fields inside them. */
.dg-page .wo-blocks {
  gap: var(--public-form-group-gap);
}

/* dg-exception: a group title clearly outranks a label, on a thin rule that closes off the group above. */
.dg-page :is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) :is(.dg-fieldset__legend, .first-conv__form-title, form h3.dg-h4) {
  margin-bottom: var(--dg-space-4);
  padding-bottom: var(--dg-space-2);
  border-bottom: var(--dg-border-width-hairline) solid var(--public-form-edge);
  color: var(--dg-text);
  font: var(--dg-type-h3);
}

/* dg-exception: inside a fieldset the gap between fields already spaces the title from its first field. */
.dg-page :is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) form .dg-fieldset .dg-fieldset__legend {
  margin-bottom: 0;
}

/* dg-exception: so does the gap of a form that is itself the card. */
.dg-page form.dg-card.first-conv__form-card > .first-conv__form-title {
  margin-bottom: 0;
}

/* dg-exception: a later group title takes the gap between groups. */
.dg-page :is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) form > :is(.first-conv__form-title, h3.dg-h4):not(.visually-hidden + *, :first-child) {
  margin-top: var(--public-form-group-gap);
}

/* dg-exception: a form card keeps the same inset on every page, so its fills do not crowd the edge. */
.dg-page .first-conv__form-card.dg-card {
  padding: var(--dg-space-6);
}

/* dg-exception: the upload is the secondary action: an outline and quiet words, with the fill left to the fields. */
.dg-page :is(.dg-card, .dg-panel, .dg-modal, .modal-content, .meeting-request-card) .file-uploader .file-uploader__picker.public-dropzone {
  border-color: var(--public-form-edge);
  background: transparent;
}

/* dg-exception: on a public page, a form column a measure wide sits centered with any heading column beside it. Text and fields stay left-aligned, a form in a row never matches, and the portals keep their columns. */
body:not(.enterprise-portal) .dg-container:has(> .dg-measure .first-conv__form-card, > .dg-measure > .dg-panel) > .dg-measure {
  margin-inline: auto;
}

/* dg-exception: a page title in its own section directly above that form lines up with the centered column. */
body:not(.enterprise-portal) .dg-page-header:has(+ .dg-section > .dg-container > .dg-measure .first-conv__form-card) > .dg-container > * {
  max-width: var(--dg-measure);
  margin-inline: auto;
}

/* dg-exception: on a phone the lawn form's address takes a whole row, so an empty line's hidden remove button would hold a row of its own. */
@media (max-width: 767px) {
  .lawn-lines__line[data-filled=false] .lawn-lines__remove {
    display: none;
  }
}