/* Canonical closed-state mobile form field. Page styles must not override its geometry. */
@media (max-width: 760px) {
  .xb-mobile-field {
    position: relative;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--xb-mobile-field-height, 64px);
    min-block-size: var(--xb-mobile-field-height, 64px);
    max-block-size: var(--xb-mobile-field-height, 64px);
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--xb-color-outline, #777b77);
    border-radius: var(--xb-mobile-field-radius, 16px);
    background: var(--xb-color-surface, #fff);
    color: var(--xb-color-on-surface, #151815);
  }

  .xb-mobile-field:focus-within {
    border-width: 2px;
    border-color: var(--xb-color-outline, #777b77);
    box-shadow: none;
  }

  .xb-mobile-field:has(> .xb-mobile-field__control.is-selected) {
    border-color: var(--xb-color-primary, #2f6b43);
    border-width: 2px;
  }

  .xb-mobile-field__legend {
    box-sizing: border-box;
    inline-size: auto;
    max-inline-size: calc(100% - 48px);
    /* Start at the rounded corner's tangent point. A 1px inline breathing
       space keeps the border from visually touching either side of the text. */
    margin-inline-start: var(--xb-mobile-field-radius, 16px);
    padding-inline: 1px;
    color: var(--xb-color-on-surface-variant, #555a55);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
  }

  .xb-mobile-field__legend > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .xb-mobile-field__control {
    position: absolute;
    inset: 0 var(--xb-mobile-field-inline-padding, 16px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    /* These three declarations intentionally outrank the late global
       typography profile. iOS zooms focused inputs whose computed size is
       below 16px. */
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: var(--xb-mobile-field-value-line-height, 24px) !important;
    text-align: start;
  }

  button.xb-mobile-field__control {
    inline-size: auto;
    cursor: pointer;
  }

  .xb-mobile-field__value,
  .xb-mobile-field__icon,
  .xb-mobile-field__money > span,
  .xb-mobile-field__input {
    transform: translateY(var(--xb-mobile-field-content-visual-shift, -4px));
  }

  .xb-mobile-field__value {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .xb-mobile-field__icon {
    display: grid;
    flex: 0 0 24px;
    inline-size: 24px;
    block-size: 24px;
    place-items: center;
  }

  .xb-mobile-field__icon svg {
    inline-size: 22px;
    block-size: 22px;
    stroke-width: 2;
  }

  .xb-mobile-field__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--xb-mobile-field-font-size, 16px) !important;
    font-weight: 400 !important;
    line-height: var(--xb-mobile-field-value-line-height, 24px) !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-size-adjust: 100%;
    /* Keep a 16px computed input size for iOS, but match the shared 15px
       visual value scale without re-enabling Safari focus zoom. */
    transform: translateY(var(--xb-mobile-field-content-visual-shift, -4px)) scale(.9375);
    transform-origin: left center;
  }

  .xb-mobile-field .xb-mobile-field__input:focus,
  .xb-mobile-field .xb-mobile-field__input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  .xb-mobile-field__money {
    gap: 6px;
  }

  .xb-mobile-field.is-disabled,
  .xb-mobile-field:has(:disabled) {
    background: var(--xb-color-surface-container-high, #ecefec);
    color: var(--xb-color-on-surface-variant, #555a55);
    opacity: .72;
  }

  .xb-mobile-field :disabled {
    cursor: not-allowed;
  }
}