/* ═══════════════════════════════════════════════════════════════
   AFC FORM ENHANCEMENTS — intake-enhancements.css
   All values taken directly from the AFC V2 design token set.
   Three feature areas:
     A. Validation error UI  (§A)
     B. Email typo suggestion (§B)
     C. Phone smart input     (§C)
     D. Native date picker    (§D)
     E. Custom select         (§E)
     F. Textarea refinement   (§F)
═══════════════════════════════════════════════════════════════ */

/* ── AFC header logo (replaces the old SVG wordmark) ──────────────────────── */
.intake-header-logo {
  height: 44px;
  width: auto;
  display: block;
}

/* ══ §A  VALIDATION ERRORS ════════════════════════════════════ */

/* Red bottom-line on invalid inputs — same 0.18s transition */
.intake-form-root input.intake-invalid,
.intake-form-root textarea.intake-invalid,
.intake-form-root select.intake-invalid {
  border-bottom-color: var(--error) !important;
  transition: border-bottom-color 0.18s ease !important;
}

/* Invalid custom select trigger */
.intake-form-root .intake-select-wrap.intake-invalid .intake-select-trigger {
  border-bottom-color: var(--error) !important;
}

.intake-form-root .check-grid.intake-invalid .check-label {
  border-color: var(--error) !important;
}

/* Error message — pixel-matches .field-error-msg */
.intake-err-msg {
  display: none;
  font-family: "Mona Sans", Norsal, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--error);
  margin-top: 6px;
  line-height: 1.35;
}
.intake-err-msg.visible {
  display: block;
}

/* Smooth transition on all V2 text inputs */
.intake-form-root .client-field input:not([type="checkbox"]):not([type="radio"]) {
  transition: border-bottom-color 0.18s ease;
}

/* ══ §B  EMAIL TYPO SUGGESTION ════════════════════════════════ */

/*
 * The suggestion bar appears below the email input.
 * Styled as a neutral inline hint — same weight as .field-mx-hint
 * but with clearly interactive Accept / Dismiss controls.
 * No border-left accent (this is a suggestion, not a warning).
 */
.intake-email-suggestion {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-left: 2px solid var(--border);
  font-family: "Mona Sans", Norsal, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
  line-height: 1.4;
  animation: suggFadeIn 0.14s ease both;
}
.intake-email-suggestion.visible {
  display: flex;
}

@keyframes suggFadeIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "Did you mean" text */
.intake-sugg-text {
  flex: 1;
  min-width: 0;
}
.intake-sugg-domain {
  font-weight: 800;
  color: var(--text-hi);
  letter-spacing: 0;
}

/* Action buttons — ghost text style, no background */
.intake-sugg-accept,
.intake-sugg-dismiss {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Mona Sans", Norsal, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.intake-sugg-accept {
  color: var(--text-hi);
  border-bottom: 1px solid var(--text-hi);
  padding-bottom: 1px;
}
.intake-sugg-accept:hover {
  color: var(--text-mid);
  border-bottom-color: var(--text-mid);
}

.intake-sugg-dismiss {
  color: var(--text-lo);
}
.intake-sugg-dismiss:hover {
  color: var(--text-mid);
}

/* Separator dot */
.intake-sugg-sep {
  color: var(--text-lo);
  font-size: 10px;
  flex-shrink: 0;
  user-select: none;
}

/* ══ §C  PHONE SMART INPUT ════════════════════════════════════ */

/*
 * Country hint — appears below the phone field once a country
 * code is detected. Subtle, same typographic weight as timestamps.
 */
.intake-phone-hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: "Mona Sans", Norsal, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-lo);
  line-height: 1;
  animation: suggFadeIn 0.14s ease both;
}
.intake-phone-hint.visible {
  display: flex;
}

/* Country flag emoji container — fixed width, no reflow */
.intake-phone-flag {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* Country name */
.intake-phone-country {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mid);
  font-size: 10px;
}

/* Format template — shows expected pattern */
.intake-phone-fmt {
  color: var(--text-lo);
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Separator */
.intake-phone-hint-sep {
  color: var(--border);
  font-size: 9px;
  flex-shrink: 0;
}

/* ══ §D  NATIVE DATE PICKER ═══════════════════════════════════ */

/*
 * Strategy: use <input type="date">, styled to match AFC V2
 * (transparent background, bottom-border only, flush padding).
 * We override the webkit chrome controls for consistency.
 * The browser's native picker popup is intentionally left intact —
 * it provides full day/month/year selection with zero JS overhead.
 */

/* The date input inherits the intake form input styles.
   We only need to handle the few date-specific overrides. */
.intake-form-root input[type="date"] {
  /* Match other V2 inputs exactly */
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 0;
  box-shadow: none;
  outline: none;
  font-family: "Mona Sans", Norsal, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-hi);
  width: 100%;
  cursor: text;
  /* Keep the calendar icon on the right — webkit shows it natively */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Placeholder / empty state text color */
.intake-form-root input[type="date"]:not([value]):not(:valid),
.intake-form-root input[type="date"][value=""] {
  color: var(--text-lo);
}

/* Focus state — same as all V2 inputs */
.intake-form-root input[type="date"]:focus {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--text-hi) !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  outline: none !important;
  caret-color: var(--text-hi) !important;
}

/* Hover — matches V2 hover */
.intake-form-root input[type="date"]:not(:focus):hover {
  border-bottom-color: var(--text-mid) !important;
}

/* Invalid (our class) */
.intake-form-root input[type="date"].intake-invalid {
  border-bottom-color: var(--error) !important;
}

/* ── Webkit inner parts ── */

/* The editable text segments (day / month / year fields) */
.intake-form-root input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  color: var(--text-hi);
  font-family: "Mona Sans", Norsal, sans-serif;
  font-size: 15px;
}

.intake-form-root input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

/* Individual day / month / year segments */
.intake-form-root input[type="date"]::-webkit-datetime-edit-day-field,
.intake-form-root input[type="date"]::-webkit-datetime-edit-month-field,
.intake-form-root input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--text-hi);
  padding: 0 1px;
  border-radius: 0;
}

/* Highlighted (selected) segment */
.intake-form-root input[type="date"]::-webkit-datetime-edit-day-field:focus,
.intake-form-root input[type="date"]::-webkit-datetime-edit-month-field:focus,
.intake-form-root input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: var(--text-hi);
  color: var(--bg);
  outline: none;
  border-radius: 0;
}

/* The "/" or "-" separators between segments */
.intake-form-root input[type="date"]::-webkit-datetime-edit-text {
  color: var(--text-lo);
  padding: 0 1px;
}

/* Calendar picker icon — match the design */
.intake-form-root input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.45;
  filter: var(--cal-icon-filter, none);
  padding: 0;
  margin: 0;
  width: 15px;
  height: 15px;
  background-size: contain;
  transition: opacity 0.15s;
}
.intake-form-root input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Dark mode: invert the icon so it shows on dark bg */
[data-theme="dark"] .intake-form-root input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Hide the inner spin button (up/down arrows some browsers add) */
.intake-form-root input[type="date"]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}

/* Firefox: date fields */
.intake-form-root input[type="date"]::-moz-focus-inner {
  border: 0;
}

/* ══ §E  CUSTOM SELECT ════════════════════════════════════════ */

.intake-select-wrap {
  position: relative;
  width: 100%;
}

/* Hide native select — kept for form submission */
.intake-native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  top: 0;
  left: 0;
}

/* Trigger — identical to other V2 inputs */
.intake-select-trigger {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-family: "Mona Sans", Norsal, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-hi);
  padding: 12px 0;
  padding-right: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  outline: none;
  line-height: 1.65;
  transition: border-bottom-color 0.18s ease;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}
.intake-sel-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.intake-sel-value.placeholder {
  color: var(--text-lo);
}

/* Arrow */
.intake-sel-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 7px;
  color: var(--text-lo);
  pointer-events: none;
  transition:
    transform 0.15s ease,
    color 0.15s;
  flex-shrink: 0;
}
.intake-sel-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.intake-select-trigger:hover:not([aria-expanded="true"]) {
  border-bottom-color: var(--text-mid);
}
.intake-select-trigger[aria-expanded="true"] {
  border-bottom-color: var(--text-hi);
}
.intake-select-trigger[aria-expanded="true"] .intake-sel-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--text-hi);
}
.intake-select-trigger:focus-visible {
  outline: 2px solid var(--text-hi);
  outline-offset: 2px;
}

/* Dropdown list */
.intake-select-menu {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0;
  z-index: 1100;
  max-height: 232px;
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;
}
.intake-select-menu::-webkit-scrollbar {
  display: none;
}
.intake-select-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0s;
}

/* Options */
.intake-sel-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-family: "Mona Sans", Norsal, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-mid);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition:
    background 0.08s,
    color 0.08s;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.intake-sel-opt:last-child {
  border-bottom: none;
}
.intake-sel-opt[data-placeholder] {
  color: var(--text-lo);
}
.intake-sel-opt:hover {
  background: var(--text-hi);
  color: var(--bg);
}
.intake-sel-opt[aria-selected="true"] {
  color: var(--text-hi);
  font-weight: 600;
}
.intake-sel-opt[aria-selected="true"]::after {
  content: "✓";
  font-size: 11px;
  color: var(--text-hi);
  flex-shrink: 0;
  margin-left: 8px;
}
.intake-sel-opt:hover[aria-selected="true"]::after {
  color: var(--bg);
}

/* ══ §F  TEXTAREA REFINEMENT ══════════════════════════════════ */

/* Slightly larger text + tighter bottom padding */
.intake-form-root textarea.intake-qs-textarea {
  font-size: 15px;
  padding-bottom: 8px;
  line-height: 1.6;
}

/* ── Compose preview background ───────────────────────────────────────────────
   --surface-2 matches the email footer colour (#E6E4E0), making the email
   invisible against the preview canvas. Override to a distinctly darker shade. */
.compose-preview-body {
  background: #b5b3af !important;
}

/* ══ §G  SHARP EDGES — zero border-radius everywhere ═════════════════════════
   AFC aesthetic: strict Swiss geometry. Every radius is eliminated.
   The only preserved exception is input[type="radio"] which becomes a
   square custom control — consistent with the geometric design language.
══════════════════════════════════════════════════════════════════════════════ */

* {
  border-radius: 0 !important;
}