/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-utility-classes/form-and-input-utilities.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/*
 * ════════════════════════════════════════════════════════════════════════════
 * FORMS.CSS - Canonical Form & Input Styling
 * ════════════════════════════════════════════════════════════════════════════
 *
 * BEM Architecture - Modifier Pattern
 * Base class (.input) provides all default styling.
 * Modifiers (.input--password, .input--error) override specific properties.
 * Use modifiers WITH the base class: <input class="input input--password">
 *
 * Width modifiers live in table-base.css (.input--date, .select--email, etc.)
 * This file contains ONLY behavioral and structural styling.
 * ════════════════════════════════════════════════════════════════════════════
 */

:root {
  --_form-section-mb: var(--form-section-mb);
  --_form-section-padding: 0;
  --_form-section-border: var(--input-border-width-thin) solid var(--input-border);
  --_form-section-border-radius: var(--radius-standard);
  --_form-section-bg: var(--card-surface);
  --_form-section-heading-display: flex;
  --_form-section-instructions-display: block;
  --_form-section-body-cols: repeat(auto-fit, minmax(min(var(--form-grid-col-width), var(--size-100pct)), 1fr));
  --_form-section-body-gap: var(--space-9px);
}

.public-form-wrapper {
  max-width: var(--breakpoint-desktop);
  margin-inline: auto;
  padding-inline: var(--space-9px);
  width: var(--size-100pct);
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE INPUT
   ══════════════════════════════════════════════════════════════════════════ */

/* Base input block - all shared styles */
.input {
  width: var(--size-100pct);
  min-width: 0;
  box-sizing: border-box;
  background: var(--input-background);
  color: var(--text-primary);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  padding: var(--control-padding-block, var(--space-1px)) var(--control-padding-inline, var(--space-9px));
  font-family: var(--font-family-primary);
  font-size: var(--control-font-size, var(--font-size-12));
  line-height: var(--control-line-height, var(--line-height-relaxed));
  letter-spacing: normal;
  outline: none;
  box-shadow: var(--shadow-subtle);
  transition: all var(--animation-quick) var(--easing-smooth);
  min-height: var(--input-height);
}

.input--address-autocomplete {
  display: block;
  width: var(--size-100pct);
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.input--address-autocomplete::part(input) {
  width: var(--size-100pct);
  min-width: 0;
  box-sizing: border-box;
  background: var(--input-background);
  color: var(--text-primary);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  padding: var(--control-padding-block, var(--space-1px)) var(--control-padding-inline, var(--space-9px));
  font-family: var(--font-family-primary);
  font-size: var(--control-font-size, var(--font-size-12));
  line-height: var(--control-line-height, var(--line-height-relaxed));
  letter-spacing: normal;
  outline: none;
  box-shadow: var(--shadow-subtle);
  transition: all var(--animation-quick) var(--easing-smooth);
  min-height: var(--input-height);
}

.input:hover {
  box-shadow: var(--shadow-soft);
}

.input--address-autocomplete:hover::part(input) {
  box-shadow: var(--shadow-soft);
}

.input:focus-visible {
  outline: var(--ring-width-thin) solid var(--vibrant-teal);
  outline-offset: var(--ring-offset-sm);
  border-radius: var(--radius-standard);
  box-shadow: var(--focus-ring-subtle);
  transform: translateY(var(--lift-subtle));
}

.input--address-autocomplete:focus-within::part(input) {
  outline: var(--ring-width-thin) solid var(--vibrant-teal);
  outline-offset: var(--ring-offset-sm);
  border-radius: var(--radius-standard);
  box-shadow: var(--focus-ring-subtle);
  transform: translateY(var(--lift-subtle));
}

.input:disabled {
  opacity: var(--opacity-soft);
  cursor: not-allowed;
}

.input--address-autocomplete[disabled]::part(input) {
  opacity: var(--opacity-soft);
  cursor: not-allowed;
}

.input--date-picker__trigger:disabled {
  opacity: var(--opacity-soft);
  cursor: not-allowed;
}

.input::placeholder {
  color: var(--text-primary);
  opacity: var(--opacity-muted-strong);
}

.input--address-autocomplete::part(input)::placeholder {
  color: var(--text-primary);
  opacity: var(--opacity-muted-strong);
}

.input--with-password-toggle {
  padding-right: calc(var(--size-44px) + var(--space-1-5px));
}

.input--visually-hidden {
  position: absolute;
  width: var(--size-1px);
  height: var(--size-1px);
  margin: calc(-1 * var(--size-1px));
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RANGE INPUT (SLIDER)
   ══════════════════════════════════════════════════════════════════════════ */

/* Range inputs should not inherit text-input chrome (<path>). */
.input[type="range"] {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: auto;
  height: var(--range-input-height);
  cursor: pointer;
  accent-color: var(--deep-teal);
}

.input[type="range"]:focus-visible {
  transform: none;
  box-shadow: var(--focus-ring-subtle);
}

.input[type="range"]::-webkit-slider-runnable-track {
  height: var(--range-track-height);
  background: var(--input-border);
  border-radius: var(--radius-pill);
}

.input[type="range"]::-moz-range-track {
  height: var(--range-track-height);
  background: var(--input-border);
  border-radius: var(--radius-pill);
}

.input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border-radius: var(--radius-pill);
  background: var(--range-thumb-background, var(--deep-teal));
  border: var(--input-border-width-md) solid var(--range-thumb-border-color, var(--white));
  box-shadow: var(--range-thumb-shadow, var(--shadow-soft));
  margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
}

.input[type="range"]::-moz-range-thumb {
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border-radius: var(--radius-pill);
  background: var(--range-thumb-background, var(--deep-teal));
  border: var(--input-border-width-md) solid var(--range-thumb-border-color, var(--white));
  box-shadow: var(--range-thumb-shadow, var(--shadow-soft));
}

/* Reusable range filter primitive wrapper — no width; parent controls sizing */
.range-filter {
  min-width: 0;
}

.range-filter__control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1-5px);
}

.range-filter__track-wrap {
  position: relative;
  width: var(--size-100pct);
}

.range-filter__track-wrap--labeled-thumb {
  --range-thumb-background: transparent;
  --range-thumb-border-color: transparent;
  --range-thumb-shadow: none;
}

.range-filter__bound {
  font-size: var(--font-size-11);
  color: var(--text-muted);
  white-space: nowrap;
  line-height: var(--line-height-110pct);
}

/* Value renders inside the slider thumb: the badge IS the thumb, so the native
   thumb is made invisible (it still handles pointer/keyboard interaction). */
.range-filter__value-badge {
  position: absolute;
  top: var(--size-50pct);
  transform: translate(-50%, -50%);
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-12);
  font-weight: var(--weight-bold);
  pointer-events: none;
  background: var(--deep-teal);
  border: var(--input-border-width-md) solid var(--white);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATE PICKER GRID (COMPACT CALENDAR)
   ══════════════════════════════════════════════════════════════════════════ */

.input--date-picker__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5px);
  padding: var(--space-1-5px);
  user-select: none;
  width: max-content;
  /* Ensure calendar body is opaque over tables */
  background: var(--input-background);
}

.input--date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, var(--size-36px));
  gap: 0;
  margin-bottom: var(--space-1px);
  width: max-content;
}

.input--date-picker__weekday {
  text-align: center;
  font-size: var(--font-size-11);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  padding: var(--space-1px);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.input--date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, var(--size-36px));
  gap: 0;
  padding: 0;
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  overflow: hidden;
  background: var(--input-background);
  width: max-content;
}

.input--date-picker__day {
  aspect-ratio: 1;
  background: var(--input-background);
  border-radius: 0;
  font-size: var(--font-size-13);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  transition: all var(--animation-quick) var(--easing-smooth);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-36px);
  height: var(--size-36px);
  border-right: var(--input-border-width-thin) solid var(--input-border);
  border-bottom: var(--input-border-width-thin) solid var(--input-border);
}

/* Remove right border on last column */
.input--date-picker__day:nth-child(7n) {
  border-right: none;
}

/* Remove bottom border on last row — applied via .input--date-picker__day--last-row class in React */
.input--date-picker__day--last-row {
  border-bottom: none;
}

.input--date-picker__day-btn {
  width: var(--size-100pct);
  height: var(--size-100pct);
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: currentColor;
  cursor: pointer;
  border-radius: inherit;
}

.input--date-picker__day-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
  position: relative;
  z-index: 1;
}

.input--date-picker__day:hover {
  background: var(--white-glass-faint-10);
}

.input--date-picker__day:active {
  background: var(--white-glass-light-20);
}

.input--date-picker__day--other-month {
  color: var(--soft-slate);
  opacity: var(--opacity-light);
}

.input--date-picker__day--today {
  font-weight: var(--weight-semibold);
  color: var(--vibrant-teal);
  background: var(--pale-teal);
  box-shadow: inset 0 0 0 var(--input-border-width-thin) var(--vibrant-teal);
}

.input--date-picker__day--selected {
  background: var(--vibrant-teal);
  color: var(--white);
  font-weight: var(--weight-bold);
  position: relative;
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-soft);
}

.input--date-picker__day--range-start {
  background: var(--vibrant-teal);
  color: var(--white);
  font-weight: var(--weight-bold);
  position: relative;
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-soft);
}

.input--date-picker__day--range-end {
  background: var(--vibrant-teal);
  color: var(--white);
  font-weight: var(--weight-bold);
  position: relative;
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-soft);
}

.input--date-picker__day--selected:hover:not(:disabled) {
  background: var(--strong-teal);
  box-shadow: var(--shadow-moderate);
}

.input--date-picker__day--range-start:hover:not(:disabled) {
  background: var(--strong-teal);
  box-shadow: var(--shadow-moderate);
}

.input--date-picker__day--range-end:hover:not(:disabled) {
  background: var(--strong-teal);
  box-shadow: var(--shadow-moderate);
}

/* Differentiate start and end dates in a range */


/* Label that appears under the date number */
.input--date-picker__day-label {
  position: absolute;
  bottom: 0;
  left: var(--size-50pct);
  transform: translateX(var(--transform-nudge));
  font-size: var(--size-7px);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  line-height: var(--line-height-110pct);
  opacity: 0.5;
  letter-spacing: var(--size-0-3px);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Make the in-range styling softer and extend to edges */
.input--date-picker__day--in-range {
  background: var(--pale-teal);
  color: var(--text-primary);
  border-radius: 0;
  position: relative;
  box-shadow: none;
}

.input--date-picker__day--in-range:hover:not(:disabled) {
  background: var(--light-teal);
  box-shadow: none;
}

/* Selected <path> dates should have stronger styling */
.input--date-picker__day--selected {
  background: var(--vibrant-teal);
  color: var(--white);
  font-weight: var(--weight-bold);
}

.input--date-picker__day--selected:hover:not(:disabled) {
  background: var(--strong-teal);
}

/* Round left edge for range start */
.input--date-picker__day--has-range-start {
  border-top-left-radius: var(--radius-standard);
  border-bottom-left-radius: var(--radius-standard);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Round right edge for range end */
.input--date-picker__day--has-range-end {
  border-top-right-radius: var(--radius-standard);
  border-bottom-right-radius: var(--radius-standard);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Single-day selection (start=end) should be fully rounded */
.input--date-picker__day--range-single {
  border-radius: var(--radius-standard);
}

/* Disabled dates */
.input--date-picker__day--disabled {
  opacity: var(--opacity-light);
  color: var(--text-disabled);
  background: var(--input-background);
}

.input--date-picker__day-btn:disabled {
  cursor: not-allowed;
}

.input--date-picker__day--disabled:hover {
  background: var(--input-background);
  box-shadow: none;
}

.input--date-picker__day--hovered:not(:disabled) {
  background: var(--white-glass-faint-10);
  box-shadow: var(--shadow-soft);
}

/* Keep date-cell separators as clear lines by painting range states on the
   inner button surface instead of the full grid cell. */
.input--date-picker__day {
  background: transparent;
}

.input--date-picker__day-btn {
  --day-btn-in-range-bg: var(--pale-teal);
  background: var(--input-background);
}

.input--date-picker__day--in-range {
  background: transparent;
}

.input--date-picker__day--in-range:hover:not(:disabled) {
  --day-btn-in-range-bg: var(--light-teal);
}

.input--date-picker__day-btn--in-range {
  background: var(--day-btn-in-range-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT MODIFIERS - Used WITH base .input class
   ══════════════════════════════════════════════════════════════════════════ */

.input--error {
  background: var(--red-glass-visible-14);
  border-color: var(--strong-red);
}

.input[aria-invalid="true"] {
  background: var(--red-glass-visible-14);
  border-color: var(--strong-red);
}

.input--error:hover {
  border-color: var(--strong-sunset);
}

.input--error:focus-visible {
  border-color: var(--strong-sunset);
  box-shadow: var(--focus-ring-danger);
  background: var(--white-glass-full-95);
}

.input[aria-invalid="true"]:hover {
  border-color: var(--strong-red);
}

.input[aria-invalid="true"]:focus-visible {
  border-color: var(--strong-red);
  box-shadow: var(--focus-ring-danger);
  background: var(--white-glass-full-95);
}

.input--textarea {
  line-height: var(--line-height-relaxed);
  resize: vertical;
  max-width: var(--size-100pct);
}

.input--with-emoji-picker {
  padding-right: var(--space-9px);
  padding-bottom: calc(var(--size-28px) + var(--space-1px));
  padding-left: var(--space-9px);
}

.input--password {
  padding-right: var(--size-64px);
}

/* Canonical read-only field value shell (same chrome as Input, non-editable presentation). */
.field__read-only-value {
  width: var(--size-100pct);
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--input-height);
  padding: var(--control-padding-block, var(--space-1px)) var(--control-padding-inline, var(--space-9px));
  background: var(--surface-hover-subtle);
  color: var(--text-secondary);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-subtle);
  transition: all var(--animation-quick) var(--easing-smooth);
  cursor: default;
  opacity: var(--opacity-visible);
  font-family: var(--font-family-primary);
  font-size: var(--control-font-size, var(--font-size-12));
  line-height: var(--control-line-height, var(--line-height-relaxed));
  letter-spacing: normal;
  white-space: var(--col-white-space, normal);
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.field__read-only-value::selection {
  background: transparent;
}

.field__read-only-value:hover {
  box-shadow: var(--shadow-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKBOX INPUT - Modifier that inherits from .input base
   ══════════════════════════════════════════════════════════════════════════ */

.input--checkbox {
  appearance: none;
  width: var(--form-checkbox-size);
  height: var(--form-checkbox-size);
  min-height: var(--form-checkbox-size);
  padding: var(--space-0);
  background: var(--input-background);
  border-color: var(--input-border);
  border-radius: var(--radius-sm);
  flex-shrink: var(--flex-shrink-none);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.input--checkbox:hover {
  border-color: var(--input-border);
}

.input--checkbox:checked {
  background: var(--vibrant-teal);
  border-color: var(--vibrant-teal);
}

.input--checkbox::after {
  content: '';
  position: absolute;
  /* Center tick without percentage-based transforms */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  /* Explicit geometry so it renders as a clear checkmark in a 16x16 box */
  width: var(--space-1-5px);
  height: var(--space-9px);
  border-style: solid;
  border-color: var(--white);
  border-width: 0 var(--input-border-width-thin) var(--input-border-width-thin) 0;
  transform: rotate(45deg);
  opacity: var(--opacity-none);
}

.input--checkbox:checked::after {
  opacity: var(--opacity-visible);
}

.input--checkbox:disabled {
  background: var(--light-slate);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKBOX FIELD WRAPPER
   ══════════════════════════════════════════════════════════════════════════ */

/* Checkbox field wrapper: [checkbox] [label] */
.checkbox__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5px);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECT INPUTS
   ══════════════════════════════════════════════════════════════════════════ */

/* Field: Container block for labeled <path>.
   Width ownership is local to the Field primitive to prevent data cell-width
   semantics from leaking into form controls. */
.field {
  --field-width: var(--size-100pct);
  --field-min-width: var(--space-0);
  --field-gap: var(--space-1px);
  --field-label-margin-bottom: var(--space-1px);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  width: var(--field-width);
  min-width: var(--field-min-width);
  box-sizing: border-box;
}

/* Active filter selects - simple and obvious */
.input--active {
  border: var(--input-border-width-md) solid var(--vibrant-teal);
  background: var(--teal-glass-faint-10);
  font-weight: var(--weight-semibold);
}
.input--select--active {
  border: var(--input-border-width-md) solid var(--vibrant-teal);
  background: var(--teal-glass-faint-10);
  font-weight: var(--weight-semibold);
}
.input--date-picker__trigger--active {
  border: var(--input-border-width-md) solid var(--vibrant-teal);
  background: var(--teal-glass-faint-10);
  font-weight: var(--weight-semibold);
}

/* Select modifier - used WITH .input base: class="input input--select" */
.input--select {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-6px);
  cursor: pointer;
  min-height: var(--input-height);
  text-align: left;
  box-sizing: border-box;
  width: var(--size-100pct);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input--select__trigger {
  position: relative;
}

/* Active modifier for the select trigger */

.input__menu {
  position: absolute;
  top: var(--size-100pct);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  margin-top: var(--space-0-5px);
  background: var(--white-glass-full-95);
  border-radius: var(--radius-standard);
  border: var(--input-border-width-thin) solid var(--input-border);
  box-shadow: var(--shadow-surface-high);
  max-height: var(--height-400px);
  overflow-y: auto;
  min-width: var(--size-100pct);
  /* Mobile optimizations */
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  overscroll-behavior: contain; /* Prevent body scroll bleed */
}

.input__menu-header {
  padding: var(--space-1-5px);
  border-bottom: var(--input-border-width-thin) solid var(--input-border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWN MENUS (Date Pickers, etc.)
   ══════════════════════════════════════════════════════════════════════════ */

.input__dropdown-anchor {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}

.input__dropdown-anchor--full {
  width: var(--size-100pct);
  display: flex;
}

.input--date-picker__anchor {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--size-100pct);
  min-width: 0;
}

.field__control {
  width: var(--size-100pct);
  display: flex;
}

.input__dropdown-anchor--external {
  display: block;
}

.input__dropdown {
  position: absolute;
  z-index: var(--z-dropdown);
  margin-top: var(--space-0-5px);
  /* Slight vertical gradient so dropdowns feel like real surfaces */
  background: linear-gradient(
    to bottom,
    var(--white),
    var(--pale-off-white)
  );
  backdrop-filter: var(--backdrop-glass-light);
  border-radius: var(--radius-standard);
  border: var(--input-border-width-thin) solid var(--input-border);
  /* Strong multi-layer shadow with real opacity for clear visual separation */
  box-shadow:
    0 10px 25px var(--black-glass-visible-15),
    0 6px 12px var(--black-glass-soft-12),
    0 3px 6px var(--black-glass-whisper-08);
  padding: 0;
  overflow-y: auto;
  max-height: min(500px, 70vh); /* Fit content up to max, then scroll */
  width: var(--size-100pct);
  animation: fadeIn var(--animation-quick) var(--easing-smooth);
  transform-origin: top center;
}

@media (prefers-reduced-motion: reduce) {
  .input__dropdown {
    animation: none;
  }
}

/* Right-align modifier: pin to right edge of <path> */
.input__dropdown--right {
  right: 0;
}

/* Icon/button-triggered menu modifier: the base .input__dropdown assumes an
   input-width parent (e.g. a search box) and sizes itself to 100% of it.
   A menu anchored to a small trigger (avatar, icon button) needs its own
   sensible width instead of shrinking to the trigger's own tiny width. */
.input__dropdown--menu {
  width: auto;
  min-width: var(--width-200px);
}

.input__dropdown--top {
  top: auto;
  bottom: calc(var(--size-100pct) + var(--space-0-5px));
  transform-origin: bottom center;
}

.input__dropdown--center {
  left: 50%;
  transform: translateX(-50%);
}

.input__dropdown--cursor {
  left: 0;
}

.input__dropdown--date-range {
  left: 0;
  top: var(--size-100pct);
  z-index: var(--z-popover);
  /* Match opaque <path> dropdown surface */
  background: var(--white-glass-frosted-90);
  max-width: var(--size-viewport-photo-viewer-width);
  box-sizing: border-box;
  animation: fadeIn var(--animation-quick) var(--easing-smooth);
  transform-origin: top center;
}

.input__dropdown--date-range-portal {
  left: 0;
  top: var(--size-100pct);
  z-index: var(--z-popover);
  background: var(--white-glass-frosted-90);
  max-width: var(--size-viewport-photo-viewer-width);
  box-sizing: border-box;
  animation: fadeIn var(--animation-quick) var(--easing-smooth);
  transform-origin: top center;
  max-height: min(var(--height-400px), calc(100vh - 16px));
  overflow-y: auto;
}

/* SearchInput <path> dropdown (portaled via DropdownSurface) */
.input__dropdown--search-history {
  max-height: var(--height-400px);
}

.input--dropdown--mobile-full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  border-radius: 0;
  width: var(--size-100pct);
  height: var(--size-100pct);
  max-width: var(--size-100pct);
  overflow-y: auto;
}

/* Date picker content wrapper (contains header, calendar grid, actions) */
.input--date-picker__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5px);
  width: max-content;
  min-width: max-content;
  max-width: calc(100vw - 16px);
  /* Ensure the calendar surface is fully opaque, matching dropdown menus */
  background: var(--white-glass-frosted-90);
}

.input--date-picker__content--with-sidebar {
  /* Sidebar-specific tokens so themes can override */
  --date-picker-sidebar-bg: var(--white-glass-strong-40);
  --date-picker-sidebar-border: var(--teal-glass-soft-12);
}

.input--date-picker__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-9px);
}

.input--date-picker__quick-ranges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-0-5px);
  padding-right: 0;
  padding-top: var(--space-1px);
  padding-bottom: var(--space-1px);
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  background: transparent;
  border-right: 0;
}

.input--date-picker__quick-ranges--below {
  border-top: var(--input-border-width-thin) solid var(--input-border);
  padding-top: var(--space-1-5px);
}

.input--date-picker__quick-ranges-below {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-0-5px);
  padding-right: 0;
  padding-top: var(--space-1-5px);
  padding-bottom: var(--space-1px);
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  background: transparent;
  border-right: 0;
  border-top: var(--input-border-width-thin) solid var(--input-border);
}

.input--date-picker__calendar {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-9px);
}

.input--date-picker__content--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5px);
  padding-bottom: var(--space-48px);
  width: var(--size-100pct);
}

/* Date picker calendar header */
.input--date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1-5px);
  padding: var(--space-1px) var(--space-1-5px);
  margin-top: 0;
  background: var(--teal-glass-soft-12);
  border-bottom: var(--input-border-width-thin) solid var(--teal-glass-soft-12);
}

.input--date-picker__header-title {
  text-align: center;
  font-size: var(--font-size-14);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  user-select: none;
  margin: 0;
}

.input--date-picker__month-label {
  font-size: var(--font-size-14);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  min-width: var(--width-160px);
  text-align: center;
  margin: 0;
}

.input--date-picker__month-label--mobile {
  font-size: var(--font-size-16);
}

/* Date picker action buttons */
.input--date-picker__actions {
  display: flex;
  gap: var(--space-1px);
  justify-content: space-between;
  padding-top: var(--space-1px);
  margin-top: var(--space-1-5px);
  border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12);
}

.input--date-picker__actions--mobile {
  position: fixed;
  bottom: var(--space-1px);
  left: var(--space-1-5px);
  right: var(--space-1-5px);
  background: var(--white-glass-frosted-90);
  padding: var(--space-1px);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-soft);
}

/* Date picker footer (range picker actions) */
.input--date-picker__footer {
  padding: var(--space-1px) var(--space-1-5px) var(--space-1-5px);
  background: var(--white-glass-frosted-90);
  border-top: var(--input-border-width-thin) solid var(--teal-glass-soft-12);
}

.input--date-picker__footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1-5px);
  flex-wrap: nowrap;
}

.input--date-picker__apply-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1-5px);
}

.address-autocomplete__input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-1-5px);
}

/* Date picker container and button wrappers */
.input--date-picker {
  position: relative;
}

.input--date-picker__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-9px);
  width: var(--size-100pct);
}

.input--date-picker__range-summary {
  min-width: 0;
}

.input--date-picker__time-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1px);
}

@media (max-width: 1099px) {
  .input--date-picker__time-actions {
    gap: var(--space-0-5px);
  }
}

.input--date-picker__trigger {
  position: relative;
  width: var(--size-100pct);
  min-width: 0;
  box-sizing: border-box;
  background: var(--input-background);
  color: var(--text-primary);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  padding: var(--space-1px) var(--space-9px);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-12);
  letter-spacing: normal;
  outline: none;
  box-shadow: var(--shadow-subtle);
  transition: all var(--animation-quick) var(--easing-smooth);
  min-height: var(--input-height);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-6px);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .input--date-picker__row {
    grid-template-columns: 1fr;
  }
}

.input--date-picker__trigger:hover {
  box-shadow: var(--shadow-soft);
}

.input--date-picker__trigger:focus-visible {
  box-shadow: var(--focus-ring-subtle);
  transform: translateY(var(--lift-subtle));
}

/* Date field selector (min-width for readability) */
.date-field-selector {
  min-width: var(--width-160px);
  font-size: var(--font-size-12);
}

.date-picker-error-container {
  flex: 1;
}

.input__dropdown:focus {
  outline: none;
}

/* Generic overlay used to close dropdowns when clicking outside */
.dropdown-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: calc(var(--z-dropdown) - 1);
}

/* Dropdown list and items */
.input__dropdown-list {
  display: flex;
  flex-direction: column;
}

.input__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-1px);
  padding: var(--space-0-5px) var(--space-1-5px);
  border: none;
  background: transparent;
  border-radius: var(--radius-standard);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s;
  font: inherit;
  color: var(--text-primary);
  line-height: var(--line-height-normal);
}

/* Divider between items, similar to sidebar separators */
.input__dropdown-item:not(:first-child) {
  border-top: var(--input-border-width-thin) solid var(--input-border);
}

.input__dropdown-item:hover {
  background: var(--white-glass-faint-10);
}

.input__dropdown-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--input-border-width-md) var(--vibrant-teal);
}

.input__dropdown-icon {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.input__dropdown-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Value text inside searchable select - prevent wrapping and handle overflow */
.input__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Allow flex item to shrink below content size */
}

/* Chevron icon - prevent shrinking */
.input__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-12px);
  height: var(--size-12px);
  line-height: 0;
  transition: transform var(--animation-quick) var(--easing-smooth);
}

/* Rotate chevron when dropdown is open */
.input__chevron--open {
  transform: rotate(180deg);
}

/* Clear button for <path> inputs */
.input__clear-button {
  position: absolute;
  right: var(--space-1px);
  top: var(--size-50pct);
  transform: translateY(var(--transform-nudge));
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-56px);
  height: var(--size-56px);
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background-color: transparent;
  color: var(--soft-slate);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-smooth),
              color var(--duration-fast) var(--easing-smooth);
}

.input__clear-button:hover {
  background-color: var(--white-glass-faint-10);
  color: var(--text-secondary);
}

.input__clear:hover {
  background-color: var(--white-glass-faint-10);
  color: var(--text-secondary);
}

.input__clear-button:active {
  background-color: var(--teal-glass-light-20);
  color: var(--text-primary);
}

.input__clear:active {
  background-color: var(--teal-glass-light-20);
  color: var(--text-primary);
}

/* Inline clear control for select triggers (sits next to caret) */
.input__clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0);
  width: var(--input-height);
  height: var(--input-height);
  min-width: var(--input-height);
  min-height: var(--input-height);
  padding: var(--space-0);
  border: none;
  border-radius: var(--radius-standard);
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-12);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-tight);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  color: var(--text-color-primary);
  box-shadow: none;
  cursor: pointer;
  transition:
    transform var(--animation-quick) var(--easing-smooth),
    box-shadow var(--animation-quick) var(--easing-smooth),
    background-color var(--animation-quick) var(--easing-smooth),
    border-color var(--animation-quick) var(--easing-smooth),
    color var(--animation-quick) var(--easing-smooth);
}

.input__clear-button:focus-visible {
  outline: var(--input-border-width-md) solid var(--vibrant-teal);
  outline-offset: var(--space-0-5px);
}

.input__clear:focus-visible {
  outline: var(--input-border-width-md) solid var(--vibrant-teal);
  outline-offset: var(--space-0-5px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCHABLE SELECT / DROPDOWN MENUS
   (used by impersonation "View As" dropdown and other async selects)
   ══════════════════════════════════════════════════════════════════════════ */

/* Visual container for dropdown menus - matches card surface styling */
.input--select__menu {
  z-index: var(--z-dropdown);
  background: linear-gradient(
    to bottom,
    var(--white),
    var(--white-glass-frosted-90)
  );
  backdrop-filter: var(--backdrop-glass-light);
  border-radius: var(--radius-standard);
  border: var(--input-border-width-thin) solid var(--card-border);
  box-shadow: var(--shadow-surface-high);
  padding: var(--space-9px);
  max-height: min(var(--height-400px), calc(100vh - 24px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  transition:
    border-color var(--animation-quick) var(--easing-smooth),
    box-shadow var(--animation-quick) var(--easing-smooth);
}

.input--select__menu:focus-within {
  border-color: var(--deep-teal);
  box-shadow:
    var(--shadow-surface-high),
    var(--focus-ring-subtle);
}

/* Dropdown menu positioning modifiers - handled by <path> components */

/* Portal container for portaled dropdowns */
.input__dropdown-portal {
  position: fixed;
  z-index: var(--z-topmost);
  visibility: hidden;
  pointer-events: auto;
  /* <path> set inline by JS based on trigger position */
  /* Let content determine width; portal only handles positioning */
  width: auto;
  min-width: auto;
  /* Shrink to fit content, no forced height */
  height: auto;
  max-height: calc(100vh - 16px);
  overflow: visible;
}

.pac-container {
  z-index: var(--z-topmost);
  font: inherit;
}

/* When rendered in a portal (DropdownSurface), constrain menu height so long lists scroll. */
.input__dropdown--in-portal {
  max-height: min(var(--height-400px), calc(100vh - 16px));
  overflow-y: auto;
}

/* Impersonation ("View As") dropdown - sidebar-inspired menu layout */
.impersonation-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: var(--size-100pct);
}

.input__dropdown--impersonation {
  min-width: auto;
  background: var(--card-surface);
  border-color: var(--card-border);
  box-shadow: var(--shadow-surface-high);
}

.input__dropdown-sticky {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 1);
  background: var(--white-glass-frosted-90);
  box-shadow: var(--shadow-divider-bottom);
}

.impersonation-menu__option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1-5px);
  width: var(--size-100pct);
}

.impersonation-menu__option-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5px);
  min-width: 0;
}

.ba-forms-page__nav-item-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5px);
  min-width: 0;
}

.impersonation-menu__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1-5px);
  width: var(--size-100pct);
}

.impersonation-menu__email {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impersonation-menu__status-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5px) var(--space-1px);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-md);
  color: var(--text-secondary);
  background: var(--white-glass-faint-10);
  border: var(--input-border-width-thin) solid var(--white-glass-faint-10);
}

.impersonation-menu__role-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-32px);
  height: var(--size-32px);
  border-radius: var(--radius-standard);
  background: var(--white-glass-faint-10);
  border: var(--input-border-width-thin) solid var(--white-glass-faint-10);
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: var(--space-0-5px);
}

.impersonation-menu__option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: var(--space-0-5px);
}

/* Date picker portals don't constrain width - calendar sizes naturally */
.input__dropdown-portal--date-picker {
  width: auto;
}

/* Wider dropdown surface (used when <path> wide=true) */
.input__dropdown-portal--wide {
  width: var(--width-320px);
  min-width: var(--width-320px);
}

/* Ensure portaled dropdown menus render as opaque cards above tables */
.input--select__menu--portal {
  background: var(--input-background);
  border-color: var(--input-border);
  box-shadow: var(--shadow-surface-high);
  padding: var(--space-9px);
}

/* Dropdown header section */
.input__dropdown-header {
  padding: var(--space-1-5px) var(--space-9px);
  border-bottom: var(--input-border-width-thin) solid var(--slate-glass-light-20);
  background: var(--white-glass-faint-10);
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: var(--backdrop-glass-light);
  box-shadow: var(--shadow-divider-bottom);
  display: flex;
  align-items: center;
  line-height: var(--line-height-tight);
}

/* Caption text in dropdown header */
.input__dropdown-caption {
  font-size: var(--font-size-12);
  color: var(--medium-slate);
  padding: var(--space-1px) var(--space-9px) var(--space-1-5px);
}

/* Dropdown section container */
.input__dropdown-section {
  padding: var(--space-1px) 0;
}

.input__dropdown-section[role='separator'] {
  padding: 0;
  margin: var(--space-1px) 0;
}

/* Search input inside dropdown */
.input__dropdown-search {
  width: var(--size-100pct);
  margin-bottom: var(--space-0);
  padding: var(--space-1-5px) var(--space-1-5px);
  border-bottom: var(--input-border-width-thin) solid var(--slate-glass-light-20);
  background: var(--white-glass-faint-10);
}

/* Multi-select action row (Select all / Clear) */
.input__dropdown-actions {
  padding: var(--space-1px) var(--space-1-5px);
  border-bottom: var(--input-border-width-thin) solid var(--white-glass-faint-10);
  background: var(--white-glass-faint-10);
}

/* Error message in dropdown */
.input__dropdown-error {
  display: flex;
  align-items: center;
  gap: var(--space-1px);
  padding: var(--space-1-5px) var(--space-9px);
  color: var(--dark-red);
  font-size: var(--font-size-12);
}

/* Loading state in dropdown */
.input__dropdown-loading {
  padding: var(--space-9px);
  text-align: center;
  color: var(--medium-slate);
  font-size: var(--font-size-12);
}

/* Scrollable list container for options */
.input__options {
  display: flex;
  flex-direction: column;
  max-height: var(--height-400px);
  overflow-y: auto;
}
.input--select__menu-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5px);
  max-height: none;
  overflow: visible;
}

/* Generic dropdown / context menu items (NOT select options) */
.menu__item {
  width: var(--size-100pct);
  padding: var(--space-1-5px) var(--space-9px);
  /* Minimum tap target; allow multi-line content to expand naturally. */
  min-height: var(--input-height);
  height: auto;
  text-align: left;
  border: none;
  /* Subtle row surface so menus feel less stark and rows read as discrete items. */
  background: linear-gradient(
    to bottom,
    var(--white-glass-faint-10),
    transparent
  );
  border: var(--input-border-width-thin) solid var(--slate-glass-light-20);
  color: var(--text-primary);
  font-size: var(--font-size-13);
  font-weight: var(--weight-normal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1-5px);
  border-radius: var(--radius-standard);
  transition:
    background-color var(--animation-quick) var(--easing-smooth),
    border-color var(--animation-quick) var(--easing-smooth),
    color var(--animation-quick) var(--easing-smooth);
}

/* Break rows apart visually (card-like list rows). */
.menu__item:not(:first-child) {
  margin-top: var(--space-0-5px);
}

.menu__item:focus-visible {
  outline: none;
  background: var(--white-glass-visible-15);
  box-shadow: var(--focus-ring-subtle);
}

.menu__item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.input__option--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.menu__item:disabled:hover {
  background: transparent;
  border-color: var(--slate-glass-light-20);
  color: var(--text-primary);
}

.menu__item:hover {
  background: var(--white-glass-visible-15);
  border-color: var(--white-glass-visible-15);
  color: var(--vibrant-teal);
}

.menu__item--selected {
  background: var(--white-glass-frosted-90);
  box-shadow: var(--shadow-glass-soft);
  font-weight: var(--weight-medium);
  border-color: var(--teal-glass-soft-12);
  color: var(--vibrant-teal);
}

.menu__item--selected:focus-visible {
  box-shadow: var(--shadow-glass-soft), var(--focus-ring-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .menu__item {
    transition: none;
  }
}

.menu__item--danger {
  color: var(--strong-red);
}

.menu__item--danger:hover {
  background: var(--red-glass-visible-14);
  color: var(--dark-red);
}

.input__option--danger:hover {
  background: var(--red-glass-visible-14);
  color: var(--dark-red);
}

.menu__item--success {
  color: var(--vibrant-teal);
}

.menu__item--success:hover {
  background: var(--teal-glass-light-20);
  color: var(--strong-teal);
}

.input__option--success:hover {
  background: var(--teal-glass-light-20);
  color: var(--strong-teal);
}

.menu__item-content {
  display: flex;
  align-items: center;
  gap: var(--space-1px);
  flex: 1 1 auto;
  min-width: 0;
}

.menu__item-icon {
  width: var(--size-16px);
  height: var(--size-16px);
  min-width: var(--size-16px);
  min-height: var(--size-16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Class injected onto the SVG icon element by MenuItemContent.withIconClass() */
.menu__item-icon__svg {
  width: var(--size-100pct);
  height: var(--size-100pct);
  display: block;
  stroke: currentColor;
}

.menu__item-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1-5px);
}

.menu__item-label-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

/* Two-line menu item: stacks label on top, caption below */
.menu__item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-2px);
  flex: 1;
  min-width: 0;
}

/* Trailing adornment pushed to the far right of the item */
.menu__item-end {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Leading adornment (dot, icon) before item body */
.menu__item-start {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: var(--space-1px);
}

/* Inline notice row (icon + text) — muted, non-error tone */
.menu__notice {
  display: flex;
  align-items: center;
  gap: var(--space-1px);
  padding: var(--space-1-5px) var(--space-9px);
  font-size: var(--font-size-12);
  color: var(--medium-slate);
}

/* Layout primitives for dropdown content — mirrors ModalRow / ModalStack */
.menu__row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5px);
  width: var(--size-100pct);
}

.menu__row--between {
  justify-content: space-between;
}

.menu__row--end {
  justify-content: flex-end;
}

.menu__item-label-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5px);
  min-width: 0;
}

.menu__item-label-title {
  width: var(--size-100pct);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu__item-label-desc {
  width: var(--size-100pct);
  min-width: 0;
  font-size: var(--font-size-12);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu__item-badges {
  flex-shrink: 0;
  margin-inline-start: var(--space-1-5px);
}

/* Quick emoji reaction row — iMessage-style tapback bar at the top of a message action menu */
.menu__emoji-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-0-5px);
  padding: var(--space-1px) var(--space-1-5px);
  border-bottom: var(--input-border-width-thin) solid var(--teal-dark-glass-clear-18);
}

.menu__emoji-btn {
  background: none;
  width: var(--size-44px);
  height: var(--size-44px);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-1-5rem);
  line-height: 1;
  transition: background var(--animation-quick), transform var(--animation-quick);
  flex-shrink: 0;
}

.bar-top-n {
  display: flex;
  flex-direction: column;
  gap: var(--space-1px);
}

.bar-top-n__item {
  width: var(--size-100pct);
  text-align: start;
  background: none;
  border: 0;
  padding: var(--space-1px) 0;
}

@media (min-width: 1024px) {
  .menu__emoji-btn {
    width: var(--size-36px);
    height: var(--size-36px);
  }
}

.menu__emoji-btn:hover {
  background: var(--light-slate);
  transform: scale(1.2);
}

.menu__emoji-btn:focus-visible {
  outline: var(--input-border-width-thin) solid var(--deep-teal);
  outline-offset: var(--size-2px);
}

.menu__emoji-btn:active {
  transform: scale(0.95);
}

.input__dropdown--dense-menu {
  padding: var(--space-1px);
}

/* Individual option buttons - cohesive with sidebar and card styling */
.input__option {
  position: relative;
  width: var(--size-100pct);
  padding: var(--space-1-5px) var(--space-9px);
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-14);
  font-weight: var(--weight-normal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1-5px);
  border-radius: var(--radius-standard);
  border-top: var(--size-1px) solid transparent;
  border-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--brand-teal-glass-thick-60) 15%,
    var(--brand-teal-glass-opaque-80) var(--size-50pct),
    var(--brand-teal-glass-thick-60) 85%,
    transparent var(--size-100pct)
  ) 1;
  transition:
    background-color var(--animation-quick) var(--easing-smooth),
    color var(--animation-quick) var(--easing-smooth);
}

/* No divider on the first option */
.input__option:first-child {
  border-top: none;
  border-image: none;
}

/* Soft hover effect with glass overlay - matches sidebar */
.input__option:hover {
  background: var(--white-glass-visible-15);
  color: var(--vibrant-teal);
}

.input__option--highlighted {
  background: var(--white-glass-visible-15);
}

.input__option--selected {
  background: var(--white-glass-frosted-90);
  box-shadow: var(--shadow-glass-soft);
  font-weight: var(--weight-medium);
  color: var(--vibrant-teal);
}

.input__option--disabled:hover {
  background: transparent;
  color: var(--text-primary);
}

/* Danger variant for destructive actions */
.input__option--danger {
  color: var(--strong-red);
}

/* Success variant for positive actions */
.input__option--success {
  color: var(--vibrant-teal);
}

.input__no-results {
  padding: var(--space-9px);
  font-size: var(--font-size-13);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  text-align: center;
}

.input__error-detail {
  margin-top: var(--space-0-5px);
  font-size: var(--font-size-12);
  opacity: 0.8;
}


.input--select__menu-header {
  padding: var(--space-1-5px) var(--space-9px);
  margin-bottom: var(--space-1px);
  border-bottom: var(--input-border-width-thin) solid var(--input-border);
  font-size: var(--font-size-13);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.input--select__menu-caption {
  margin-top: var(--space-0-5px);
  font-size: var(--font-size-12);
  color: var(--soft-slate);
}

.input--select__menu-section {
  padding: var(--space-0-5px) 0;
}

.input--select__menu-search-input {
  position: sticky;
  top: 0;
  z-index: 1;
  width: var(--size-100pct);
  margin-bottom: var(--space-1px);
  padding: var(--space-0-5px) 0 var(--space-1px);
  background: linear-gradient(
    to bottom,
    var(--white),
    var(--white-glass-frosted-90)
  );
  backdrop-filter: var(--backdrop-glass-light);
  border-bottom: var(--input-border-width-thin) solid var(--slate-glass-light-20);
}

.input--select__menu-error {
  display: flex;
  align-items: center;
  gap: var(--space-1px);
  padding: var(--space-1-5px) var(--space-9px);
  color: var(--strong-red);
  font-size: var(--font-size-13);
}

.input--select__menu-loading {
  padding: var(--space-9px);
  text-align: center;
  font-size: var(--font-size-13);
  color: var(--text-secondary);
}

.input--select__menu-footer {
  padding: var(--space-1-5px) var(--space-9px);
  margin-top: var(--space-1px);
  border-top: var(--input-border-width-thin) solid var(--input-border);
  font-size: var(--font-size-12);
  color: var(--soft-slate);
}

.input--select__menu-empty {
  padding: var(--space-1-5px) var(--space-9px);
  font-size: var(--font-size-12);
  color: var(--medium-slate);
}

.input--select__menu-footer {
  padding: var(--space-1-5px) var(--space-9px);
  border-top: var(--input-border-width-thin) solid var(--slate-glass-light-20);
}

.input--select__menu-footer-note {
  display: flex;
  align-items: center;
  gap: var(--space-1px);
  font-size: var(--font-size-12);
  color: var(--medium-slate);
}

/* Section labels in dropdowns */
.text-label-dense--dropdown {
  padding: var(--space-1px) var(--space-9px);
  font-size: var(--font-size-12);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--soft-slate);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD - Reusable field wrapper block (label + input + validation)
   Standard BEM: Separate from .form (layout) and .input (control)
  Minimal API:
  - Layout: stacked (default) or inline via .field--inline
  - State: error via .field--error
  - Width: full by default via .field__control; avoid control-level width modifiers

  Notes:
  - Use .field--inline when you want a single-row layout (label + control on
    one line). Default stacked keeps label above the control.
  - Width is always owned by .field__control; controls inside expand to 100%.
   ══════════════════════════════════════════════════════════════════════════ */

/* Field inline layout: label + control on one row */
.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1-5px);
  width: auto;
}

.field__inline-label {
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.field__label--inline {
  margin-bottom: 0;
}

.field__control--inline {
  width: auto;
}

.field--error {
  --form-border-color: var(--strong-sunset);
  --field-outlined-label-color: var(--strong-sunset);
}

/* Removed outlined-field variant path. Input now owns the border globally. */

.field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5px);
  margin-bottom: var(--field-label-margin-bottom);
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  max-width: var(--size-100pct);
}

.field__label-indicator {
  display: inline-block;
  padding: 0 var(--space-0-5px);
  border-radius: var(--radius-standard);
  font-size: var(--font-size-12);
  line-height: var(--line-height-110pct);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}

.field__label-indicator--read-only {
  color: var(--text-secondary);
  background: var(--surface-hover-subtle);
  border: var(--input-border-width-thin) dashed var(--input-border);
}

.field--floating {
  position: relative;
}

.field__label--floating {
  position: absolute;
  top: var(--size-50pct);
  left: var(--space-9px);
  margin: 0;
  padding: 0 var(--space-0-5px);
  background: var(--white);
  border-radius: var(--radius-standard);
  color: var(--medium-slate);
  font-size: var(--font-size-11);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-110pct);
  transform-origin: left center;
  transform: translateY(-50%);
  pointer-events: none;
  transition:
    transform var(--animation-quick) cubic-bezier(0.2, 0.7, 0.2, 1),
    color var(--animation-quick) var(--easing-smooth);
}

.input--in-floating-field {
  padding-top: var(--space-12px);
}

.field__label--floating-active {
  transform: translateY(calc(-1 * var(--space-12px))) scale(0.9);
  color: var(--vibrant-teal);
}

/* AI Smart Fill badge (class-driven; cleared on first manual edit) */
.field__label--ai-filled::after {
  content: "AI";
  display: inline-block;
  margin-left: var(--space-1px);
  padding: 0 var(--space-1px);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-12);
  line-height: var(--line-height-comfortable);
  font-weight: var(--weight-semibold);
  color: var(--deep-teal);
  background: var(--pale-teal);
  border: var(--input-border-width-thin) solid var(--input-border);
}

/* Light-on-dark label variant for dark surfaces */
.field__label--light {
  color: var(--text-on-dark);
}

.field__required {
  color: var(--strong-red);
  margin-left: var(--space-0-5px);
}

/* Checkbox input element - use with .field--inline for horizontal layout */
.field__checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5px);
  cursor: pointer;
  accent-color: var(--vibrant-teal);
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-normal);
  width: auto;
  user-select: none;
}

/* description spacing: fires only when a Text element directly precedes the control */
.field__description {
  display: block;
  font-size: var(--font-size-12);
  color: var(--medium-slate);
  margin-bottom: var(--space-4px);
}

.field__error {
  display: block;
  font-size: var(--font-size-12);
  color: var(--strong-red);
}

.field__help {
  display: block;
  font-size: var(--font-size-12);
  color: var(--medium-slate);
}

.field__meta {
  min-height: var(--size-16px);
  margin-top: var(--space-1px);
}

.field__meta--reserved {
  min-height: var(--size-20px);
}

.field__meta-placeholder {
  display: block;
  width: var(--size-100pct);
  min-height: var(--size-16px);
}

/* Prefix row — symbol or short text to the left of an input (e.g. currency $ sign) */
.field__prefix-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.field__prefix {
  flex-shrink: 0;
  font-size: var(--font-size-13);
  color: var(--color-text-muted);
}

/* Control container inside field - holds the actual <path> block */

.field__control-main {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  align-items: stretch;
  min-height: auto;
  padding-inline: 0;
}

.field__control-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-1px);
  margin-left: var(--space-1px);
}

/* NOTE: width helpers for data--*-full have been deprecated.
 * Use semantic width classes from field-and-cell-widths.css instead.
 */

/* Inline control variant: shrink to content */
/* Legacy: prefer using .field--inline with flex growth rules */
.field__control--inline {
  width: auto;
  display: inline-block;
}

/* Dense fields trim vertical space */
/* Former dense variant removed */

/* ═══════════════════════════════════════════════════════════════════════════
   FORM LAYOUT PATTERNS
   ══════════════════════════════════════════════════════════════════════════ */

.form {
  width: var(--size-100pct);
  min-width: 0;
  padding: var(--space-12px);
}

.form__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-9px);
  margin-top: 0;
  min-width: 0;
  width: var(--size-100pct);
}

.form__footer-row {
  min-width: 0;
  flex: 0 0 auto;
  margin-block: var(--space-9px);
}

.form__footer--with-gap-rows {
  gap: calc(var(--button-height) + (var(--space-9px) * 2));
}

.form--dense {
  width: var(--size-100pct);
}

.form--dense__form-field {
  margin-bottom: var(--space-1-5px);
}

.form__section {
  margin-bottom: var(--_form-section-mb);
  padding: var(--_form-section-padding);
  border: none;
  border-radius: var(--_form-section-border-radius);
  background: var(--_form-section-bg);
  box-shadow: none;
}

.form__section-heading {
  display: var(--_form-section-heading-display);
  align-items: center;
  gap: var(--space-1-5px);
  margin-bottom: var(--space-1-5px);
  padding-bottom: 0;
  border-bottom: none;
  box-shadow: none;
}

.form__section-heading--with-leading-icon {
  align-items: flex-start;
  gap: var(--space-9px);
}

.form__section-heading--with-rule {
  padding-bottom: var(--space-5px);
  border-bottom: var(--input-border-width-thin) solid var(--soft-slate);
}

.form__section-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1px);
  flex: 1 1 auto;
  min-width: 0;
}

.form__section-heading__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  overflow: hidden;
  line-height: 0;
  width: var(--size-30px);
  height: var(--size-30px);
  color: var(--deep-teal);
  background: var(--palest-teal);
  border: var(--input-border-width-thin) solid var(--light-teal);
}

.form__section-heading__icon-svg {
  width: var(--size-14px);
  height: var(--size-14px);
  display: block;
}

.form__section-heading--outlined-badge {
  position: absolute;
  top: 0;
  left: calc(var(--radius-standard) + var(--space-0-5px));
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0 var(--space-3px);
  min-height: 0;
  background: var(--_form-section-bg);
  z-index: 1;
}

.form__section-meta--outlined-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-transform: none;
  letter-spacing: 0.02em;
  font-variant-caps: small-caps;
}

.form__section--outlined-badge {
  position: relative;
  /* Reserve room since heading is taken out of normal flow.
     Extra clearance ensures floating labels on the first row of fields
     do not overlap the section badge when they rise above their input border. */
  padding-top: calc(var(--space-12px) + var(--space-1-5px));
}

/* First outlined section sits directly under <path> headers.
   Add clearance so the floating badge title never collides with header chrome. */
.form__section--outlined-badge:first-child {
  margin-top: var(--space-9px);
}

@media (max-width: 639px) {
  .form__section--outlined-badge {
    padding: var(--space-9px);
    padding-top: var(--space-12px);
  }

  .form__section--outlined-badge:first-child {
    margin-top: 0;
  }
}

.form__section-meta-text--outlined-badge {
  font-size: var(--font-size-11);
  font-weight: var(--weight-semibold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Styling for this context moved to text--section-label-badge variant in typography-utilities.css */

.form__section-divider {
  /* Make section breaks more data-dense than global defaults. */
  display: var(--form-section-divider-display);
  margin: var(--space-1-5px) 0;
}

.form__section-instructions {
  display: var(--_form-section-instructions-display);
  width: var(--size-100pct);
  margin-bottom: var(--space-1-5px);
}

.form__section-body {
  width: var(--size-100pct);
  display: grid;
  grid-template-columns: var(--_form-section-body-cols);
  gap: var(--_form-section-body-gap);
  container-type: inline-size;
}

.form__instructions {
  width: var(--size-100pct);
  margin-bottom: var(--space-1-5px);
}

.form__instructions-list {
  margin: 0;
  padding-inline-start: var(--size-1-1rem);
  display: grid;
  gap: var(--size-0-25rem);
  width: var(--size-100pct);
}

.form__instructions-item {
  margin: 0;
}

.form__instructions-item:last-child {
  margin-bottom: 0;
}

.form__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1px);
  width: var(--size-100pct);
}

.form__page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1px);
  width: var(--size-100pct);
}
.form__status {
  width: var(--size-100pct);
}

.form__row {
  display: grid;
  grid-template-columns: var(--_form-section-body-cols);
  gap: var(--_form-section-body-gap);
  margin-bottom: 0;
  /* Ensure the row stretches to the available width so fields can wrap naturally. */
  width: var(--size-100pct);
  min-width: 0;
  align-self: stretch;
  justify-content: flex-start;
}

.form__row--flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-9px);
}

.form__row--flex-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-9px);
}

.form__row--flex-layout {
  width: var(--size-100pct);
  min-width: 0;
  align-self: stretch;
}

.form__row-item {
  grid-column: var(
    --_form-row-item-semantic-col,
    span round(
      up,
      calc(
        var(--form-row-item-grid-width, var(--width, var(--form-grid-col-width)))
        / var(--form-grid-col-width)
      )
    )
  );
  min-width: 0;
}

/* Mobile (≤600px): always full width */
@container (max-width: 600px) {
  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .form__row-item {
    grid-column: span 1;
  }
}

.form__row-field {
  grid-column: var(--form-row-field-grid-column, span 12);
  width: var(--form-row-field-width, auto);
  min-width: 0;
  max-width: var(--form-row-field-max-width, none);
}

@media (max-width: 639px) {
  .form__row-field {
    grid-column: var(--form-row-field-grid-column-mobile, var(--form-row-field-grid-column, span 12));
  }
}

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-9px);
  margin-top: var(--space-18px);
  padding-top: var(--space-18px);
  border-top: var(--input-border-width-thin) solid var(--soft-slate);
  grid-column: var(--form-actions-gc);
}

.form__actions--row {
  flex-direction: row;
  align-items: initial;
  padding-top: 0;
  border-top: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   BA PROFILE MAP (Google Maps)
   ══════════════════════════════════════════════════════════════════════════ */

.ba-profile__map-instructions-icon {
  display: inline-flex;
}

.ba-profile__map-container {
  height: var(--height-400px);
  width: var(--size-100pct);
  margin-top: var(--space-12px);
  border: var(--input-border-width-thin) solid var(--soft-slate);
  border-radius: var(--radius-standard);
  overflow: hidden;
}

.ba-profile__map {
  height: var(--size-100pct);
  width: var(--size-100pct);
}

.ba-profile__map-instructions {
  margin-top: var(--space-1-5px);
  display: flex;
  align-items: center;
  gap: var(--space-1-5px);
}

/* ══════════════════════════════════════════════════════════════════════════
   ADDRESS AUTOCOMPLETE
   ══════════════════════════════════════════════════════════════════════════ */

.address-autocomplete {
  width: var(--size-100pct);
}

.address-autocomplete__icon {
  display: inline-flex;
  color: var(--medium-slate);
}

.form__actions--row-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-9px);
  justify-content: flex-end;
}

.form__actions--row-between {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-9px);
  justify-content: space-between;
}

/* Tight variant: one-class BEM alternative to stacked mt-tight */
.form__actions--tight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5px);
  margin-top: var(--space-1-5px);
  padding-top: var(--space-0);
  border-top: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSWORD INPUT WITH TOGGLE
   ══════════════════════════════════════════════════════════════════════════ */

.input__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--size-100pct);
}

.input__toggle-button {
  position: absolute;
  right: var(--space-1px);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1-5px);
  color: var(--medium-slate);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-36px);
  height: var(--size-36px);
  border-radius: var(--radius-pill);
}

.input__toggle-button:hover {
  color: var(--deepest-slate);
  background: var(--white-glass-light-20);
}

/* Icon inside toggle button — class applied to the icon element in the input component. */
.input__toggle-button__icon {
  width: var(--size-16px);
  height: var(--size-16px);
  display: block;
}

/* Textarea emoji picker (dense Material-inspired affordance) */
.input__emoji-button {
  position: static;
  width: var(--size-28px);
  height: var(--size-28px);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-pill);
  background: var(--white-glass-full-95);
  color: var(--medium-slate);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-subtle);
  margin-top: var(--space-0-5px);
}

.input__emoji-button:hover {
  color: var(--deepest-slate);
  background: var(--white);
}

.input__emoji-button__icon {
  width: var(--size-14px);
  height: var(--size-14px);
}

.input__emoji-popover {
  position: static;
  width: var(--size-180px);
  padding: var(--space-1px);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  background: var(--white-glass-full-95);
  box-shadow: var(--shadow-surface-high);
  z-index: var(--z-popover);
  margin-top: var(--space-0-5px);
}

.input__emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-0-5px);
}

.input__emoji-option {
  border: none;
  background: transparent;
  border-radius: var(--radius-standard);
  min-height: var(--size-24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-14);
  line-height: 1;
}

.input__emoji-option:hover {
  background: var(--white-glass-light-20);
}

.switch-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-9px);
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: var(--size-100pct);
}

.switch-row__group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-9px);
  flex-wrap: nowrap;
  justify-content: center;
  min-width: 0;
  max-width: var(--size-100pct);
}

.switch-row--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1-5px);
}

.input--switch {
  position: relative;
  display: inline-block;
  width: var(--switch-track-width);
  height: var(--switch-track-height);
  flex-shrink: 0;
  cursor: pointer;
}

.input--switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.input--switch__track {
  display: block;
  width: var(--size-100pct);
  height: var(--size-100pct);
  border-radius: var(--radius-pill);
  border: var(--input-border-width-thin) solid var(--input-border);
  background: var(--input-background);
  padding: 0;
  min-height: auto;
  backdrop-filter: var(--blur-md);
  transition:
    background-color var(--animation-quick) var(--easing-smooth),
    border-color var(--animation-quick) var(--easing-smooth);
}

.input--switch:focus-within {
  box-shadow: var(--focus-ring-subtle);
}

.input--switch__track--checked {
  background: var(--input-background);
  border-color: var(--input-border);
}

.input--switch__track--disabled {
  opacity: 0.7;
}

.input--switch__thumb {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: var(--radius-pill);
  border: var(--input-border-width-thin) solid var(--input-border);
  background: var(--vibrant-teal);
  color: var(--text-on-primary);
  padding: 0;
  min-height: auto;
  top: var(--position-center-block);
  left: var(--switch-thumb-offset);
  transform: translateY(var(--offset-center-block));
  transition: all var(--animation-quick) var(--easing-smooth);
}

.input--switch__thumb--checked {
  background: var(--text-on-primary);
  border-color: var(--input-border);
  color: var(--vibrant-teal);
  left: var(--switch-thumb-offset-checked);
}

/* Field shell utilities - visual styling only (<path>)
   Note: Structural .field class now lives in form-and-input-utilities.css
   These are just visual variants for applying status colors */

/* Neutral field shell: aligns with canonical .input <path> tokens */
.field--shell {
  position: relative;
  border: var(--input-border-width-thin) solid var(--soft-gray);
  border-radius: var(--radius-standard);
  background: var(--input-background);
  padding: var(--space-9px);
}

/* Floating label treatment inside shell */
.field__label--shell {
  position: absolute;
  top: 0;
  left: var(--space-9px);
  transform: translateY(var(--transform-nudge));
  margin-bottom: 0;
  padding-inline: var(--space-1px);
  font-size: var(--font-size-11);
  font-weight: var(--weight-medium);
  background: var(--page-bg-surface);
}

.field__control--shell {
  margin-top: var(--space-1px);
}

/* Status field shell variants (visual only; combine with .ring-* utilities for focus) */
.field--shell-danger {
  border-color: var(--strong-red);
}

.field--shell-success {
  border-color: var(--accent-teal);
}

.field--shell-warning {
  border-color: var(--strong-sunset);
}

/**
 * Public Form Structural Styling
 * Layout and structure for public-facing forms (booking, payment, client intake)
 * Uses existing .input, .field, .form base blocks from form-and-input-utilities.css
 * Only adds structural BEM styling for Form.tsx component layout
 */

/* ═══════════════════════════════════════════════════════════════════════════
   FORM WRAPPER & CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */

/* Override narrow public form wrapper - already defined in form-and-input-utilities.css */
.public-form__wrapper {
  max-width: var(--breakpoint-tablet);
  margin-inline: auto;
  padding: var(--space-18px) var(--space-12px);
  box-sizing: border-box;
  min-height: calc(100vh - var(--size-64px));
}

/* Main form section card */
.form-section {
  background: var(--white-glass-frosted-90);
  border-radius: var(--radius-standard);
  margin-bottom: var(--space-18px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  border: var(--input-border-width-thin) solid var(--teal-glass-faint-10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════════════════════════════════════ */

.section-header {
  padding: var(--space-12px) var(--space-18px);
  background: linear-gradient(135deg, var(--palest-teal), var(--pale-teal));
  border-bottom: var(--input-border-width-md) solid var(--light-teal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9px);
}

.section-header-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-9px);
  flex: 1;
}

.section-header__title {
  font-weight: var(--weight-normal);
  line-height: var(--line-height-relaxed);
}

/* Collapsible toggle button */
.section-toggle {
  background: none;
  border: none;
  padding: var(--space-1px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--animation-quick) var(--easing-smooth);
  flex-shrink: 0;
}

.section-toggle:hover {
  transform: scale(1.1);
}

.section-caret {
  width: var(--size-20px);
  height: var(--size-20px);
  border-right: var(--input-border-width-md) solid var(--deep-teal);
  border-bottom: var(--input-border-width-md) solid var(--deep-teal);
  transform: rotate(45deg);
  transition: transform var(--animation-quick) var(--easing-smooth);
}

.section-caret--open {
  transform: rotate(-135deg);
}

.section-actions {
  display: flex;
  gap: var(--space-1-5px);
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTRUCTIONS BLOCK
   ══════════════════════════════════════════════════════════════════════════ */

.section-instructions {
  padding: var(--space-12px) var(--space-18px);
  background: var(--white-glass-opaque-80);
  border-bottom: var(--input-border-width-thin) solid var(--teal-glass-faint-10);
  border-radius: 0;
}

.form-instructions {
  padding: var(--space-12px) var(--space-18px);
  background: var(--white-glass-opaque-80);
  border-bottom: var(--input-border-width-thin) solid var(--teal-glass-faint-10);
  border-radius: 0;
}

/* Instruction block text — apply to <p> elements inside <path> instructions */
.form-instructions__text {
  font-size: var(--font-size-14);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* Instruction block layout row */
.form-instructions__row {
  gap: var(--space-9px);
  align-items: center;
}

/* Instruction block icon */
.form-instructions__icon {
  color: var(--vibrant-teal);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION BODY & FIELD LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

.section-body {
  padding: var(--space-18px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD ROWS - Responsive Grid Layout with HStack Nesting Support
   Best of both worlds: predictable grid structure + flexible field grouping

   Usage:
   - Use field-row for the overall row (becomes 1→2→3 col grid)
   - Put individual fields directly in the row for full grid cells
   - Use .hstack inside a grid cell to group related fields (e.g., City + State)

   Example:
   <div class="field-row">
     <fieldset class="field">...</fieldset>
     <fieldset class="field">...</fieldset>
     <div class="hstack hstack--md">
       <fieldset class="field">...</fieldset>
       <fieldset class="field">...</fieldset>
     </div>
   </div>
   ══════════════════════════════════════════════════════════════════════════ */

.field-row {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: var(--space-12px);
  margin-bottom: var(--space-12px);
  align-items: flex-start;
}

/* Tablet (640px+): 2 columns */
  @media (min-width: 640px) {
  .field-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (1024px+): 3 columns with more breathing room */
  @media (min-width: 1024px) {
  .field-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-18px);
  }
}

/* Last row shouldn't have bottom margin */
.field-row:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC FORM ENHANCEMENTS
   Uses existing .field and .input base blocks, adds public-form-specific sizing
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION FOOTER & FORM FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

.section-footer {
  padding: var(--space-18px);
  background: var(--white-glass-visible-15);
  border-top: var(--input-border-width-thin) solid var(--teal-glass-faint-10);
}

.form-footer {
  padding: var(--space-18px);
  background: var(--white-glass-visible-15);
  border-top: var(--input-border-width-thin) solid var(--teal-glass-faint-10);
}

.form-footer {
  border-radius: 0 0 var(--radius-standard) var(--radius-standard);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .public-form__wrapper {
    padding: var(--space-12px) var(--space-9px);
  }

  .section-header {
    padding: var(--space-9px) var(--space-12px);
  }

  .section-body {
    padding: var(--space-12px);
  }

  .section-footer {
    padding: var(--space-12px);
  }

  .form-footer {
    padding: var(--space-12px);
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE ACCESSIBILITY OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* iOS Safari auto-zooms the viewport when any <path> has
     font-size < 16px. This is disruptive and breaks layout. Fix: force 16px
     on mobile. Desktop keeps the dense 12px size unchanged. */
  .input {
    font-size: var(--font-size-16);
  }

  /* Touch target: standard inputs should be at least 44px tall on mobile
     (WCAG 2.5.5). */
  .input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
    min-height: var(--touch-target-min);
  }

  /* Range filter labels: bump from 11px → 14px for readability on mobile */
  .range-filter__bound {
    font-size: var(--font-size-mobile-sm);
  }

  /* Field labels: bump from 10-11px to 12px minimum on mobile */
  .field__label {
    font-size: var(--font-size-mobile-2xs);
  }

  /* Checkbox: larger visual target on mobile (20px → 24px) */
  .input--checkbox {
    --form-checkbox-size: var(--size-24px);
  }
}

/* ============================================================================
   TIME INPUT — text field + AM/PM pill toggle
   ============================================================================ */

.input--time-wrapper {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: var(--size-100pct);
  background: var(--input-background);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  min-height: var(--input-height);
  transition: all var(--animation-quick) var(--easing-smooth);
}

.input--time-wrapper:focus-within {
  border-color: var(--vibrant-teal);
  box-shadow: var(--focus-ring-subtle);
  transform: translateY(var(--lift-subtle));
}

.input--time {
  flex: 1 1 0;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

.input--time-wrapper--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.input--time-ampm__toggle {
  flex-shrink: 0;
  min-width: var(--size-36px);
  height: auto;
  padding: 0 var(--space-1px);
  border: none;
  border-left: var(--input-border-width-thin) solid var(--input-border);
  outline: none;
  background: var(--surface-hover-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
}

.input--time-ampm__toggle:hover {
  background: var(--light-slate);
  color: var(--text-primary);
}

.input--time-ampm__toggle:focus-visible {
  background: var(--teal-glass-faint-10);
  color: var(--text-primary);
}

/* ============================================================================
   BA FORMS PAGE — split layout (nav left, content right)
   ============================================================================ */

.ba-forms-page {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12px);
  height: var(--size-100pct);
  min-height: 0;
}

.ba-forms-page__nav {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1px);
  padding: var(--space-1-5px);
  background: var(--card-surface);
  border: var(--input-border-width-thin) solid var(--input-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-subtle);
}

.ba-forms-page__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5px);
  width: var(--size-100pct);
  padding: var(--space-1-5px) var(--space-9px);
  border: none;
  border-radius: var(--radius-standard);
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--text-default);
}

.ba-forms-page__nav-item:hover {
  background: var(--light-slate);
}

.ba-forms-page__nav-item--active {
  background: var(--light-teal);
  color: var(--deep-teal);
}

.ba-forms-page__nav-item--active:hover {
  background: var(--teal-glass-light-20);
}

.ba-forms-page__nav-item--disabled {
  opacity: 0.5;
  cursor: default;
}

.ba-forms-page__content {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

.ba-forms-page__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size-100pct);
  min-height: var(--size-200px);
}

/* ── Select rich-option layout ───────────────────────────────────────────── */

/* Root wrapper — display:contents so it is invisible to layout consumers */
.select__root {
  display: contents;
}

/* Outer row: avatar + text column */
.select__rich-option-row {
  display: flex;
  align-items: center;
  gap: var(--space-9px);
  width: var(--size-100pct);
}

/* Text column inside the row */
.select__rich-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Primary label — truncates on overflow */
.select__rich-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Subtitle line — muted, smaller, also truncates */
.select__rich-option-subtitle {
  font-size: var(--font-size-12);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}