/* Birth-entry readability only. Keep chart content, colours and calendar rules unchanged. */
.input-card-compact :is(.quick-field > span, .quick-mode-row > span, .quick-date-row > span, .quick-hour-row > span, .gz-label, .advanced-check, .quick-check),
#birthForm :is(label, .birth-gender, .birth-name > span, .birth-gender > span, .birth-mode-row > span, .birth-date-row > span) {
  font-size: 12px;
  letter-spacing: 0;
}

.input-card-compact :is(.quick-field > span i, .quick-field > span small),
#birthForm label small {
  font-size: 12px;
}

.input-card-compact .seg-btn,
#birthForm .birth-toggle button {
  min-height: 44px;
  height: 44px;
  padding-block: 0;
  font-size: 13px;
  line-height: 1.4;
}

.input-card-compact .quick-field .seg-btn {
  font-size: 13px;
}

.input-card-compact .seg,
.input-card-compact .quick-field .seg {
  height: auto;
  min-height: 44px;
}

.input-card-compact :is(button, .advanced-options > summary),
#birthForm :is(button, .birth-settings > summary) {
  min-height: 44px;
}

.input-card-compact .advanced-options > summary,
#birthForm .birth-settings > summary,
#birthForm .birth-settings > summary small {
  font-size: 12px;
  letter-spacing: 0;
}

.input-card-compact input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.input-card-compact :is(select, .quick-date-row select, .quick-hour-row select),
#birthForm input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#birthForm select {
  font-size: 16px;
}

.input-card-compact :is(.input-note, .advanced-help, .tst-note, .city-status, .calendar-input-status),
#birthForm :is(.birth-hint, .birth-save-note, .birth-settings-content p) {
  font-size: 12px;
  line-height: 1.7;
}

.input-card-compact :is(.quick-mode-row > span, .quick-date-row > span, .quick-hour-row > span) {
  min-width: 64px;
  flex-basis: 66px;
}

@media (max-width: 640px) {
  .input-card-compact :is(.quick-mode-row > span, .quick-date-row > span, .quick-hour-row > span) {
    flex-basis: 64px;
  }

  #birthForm :is(.birth-mode-row, .birth-date-row, .birth-time-row, .birth-settings-content label) {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}

/* Keep the entire choice label tappable, not just its small checkbox. */
.input-card-compact :is(.advanced-check, .quick-check),
#birthForm .birth-check {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  padding-block: 4px;
  line-height: 1.5;
  cursor: pointer;
  touch-action: manipulation;
}

.input-card-compact :is(.advanced-check, .quick-check) input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
}

.input-card-compact .quick-field > span,
#birthForm .birth-name > span {
  gap: 6px;
  line-height: 1.5;
}

.input-card-compact .city-ac-toggle {
  min-width: 44px;
  width: 44px;
}

/* This is an input-mode selector; the control beside it chooses the time. */
#birthForm #birthTimeMode {
  min-height: 44px;
  padding-inline: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--bg);
}