/* Hangout form building blocks (js/sheets/hangout-fields.js) shared by the create screen (its
   layout is in create.css) and the host's edit sheet (js/sheets/hangout-edit.js): labelled fields
   with error marks and counted text areas. Rules are scoped to .cf: field class names also appear
   on other screens with other meanings. */

.cf [hidden] {
  display: none !important;
}

.cf {
  padding: var(--gap);
}

/* A field placed directly in the form is a card of its own (the edit sheet). */
.cf > .field {
  margin-bottom: var(--gap);
  padding: 14px var(--gap);
  border-radius: var(--radius);
  background: var(--section);
}

.cf .field-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.cf .field-hint {
  margin: 0;
  color: var(--hint);
  font-size: 12px;
}

.cf .field-error {
  color: var(--danger);
  font-size: 13px;
}

.cf .field-invalid > .field-label {
  color: var(--danger);
}

.cf .field-invalid .input {
  border-color: var(--danger);
}

.cf .field-invalid .chips,
.cf .field-invalid .stepper,
.cf .field-invalid .picker-frame {
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--danger);
}

.cf .chips-wrap {
  flex-wrap: wrap;
  overflow: visible;
}

.cf input[type='date'],
.cf input[type='time'] {
  min-height: 44px;
}

.counted {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.counter-over {
  color: var(--danger);
  font-weight: 600;
}

/* Host's edit sheet: the sheet body already has side padding. */
.cf.cf-edit {
  padding: 4px 0 var(--gap);
}