/* Canonical 2IP outlined controls. Feature CSS owns layout, never field skins. */
/* One-line metrics are shared by native inputs, selects and their icon slots. */
:root { --twoip-control-height: 44px; --twoip-control-line-height: 22px; --twoip-control-font-size: 16px; --twoip-control-padding-inline: 12px; --twoip-control-icon-size: 16px; }
@media (max-width: 480px) { :root { --twoip-control-height: 56px; } }
/* Editable state ink has one owner; locked controls keep their own contract. */
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):has(:is(.form-control,.twoip-input-field > input):not(:is([type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))) { --twoip-field-state: var(--twoip-outline); }
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):not(:is(.twoip-invalid,.twoip-valid,.twoip-warning)):has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"])):hover) { --twoip-field-state: var(--twoip-on-surface-variant); }
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):not(:is(.twoip-invalid,.twoip-valid,.twoip-warning)):has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"])):focus),
body .twoip-form-group.is-focused:not(:is(.twoip-invalid,.twoip-valid,.twoip-warning)):has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))) { --twoip-field-state: var(--twoip-primary); }
body .twoip-form-group.twoip-valid:has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))) { --twoip-field-state: var(--twoip-success); }
body .twoip-form-group.twoip-warning:has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))) { --twoip-field-state: var(--twoip-warning); }
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))):is(.twoip-invalid,:has(:is(.form-control,.twoip-input-field > input):is([aria-invalid="true"],.is-invalid))) { --twoip-field-state: var(--twoip-error); }
/* Outlined fields with persistent labels and contextual supporting text. */
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select):not([type="hidden"]),
body :is(.t3-content,.modal,.twoip-city-popup) :where(input:not([type]),input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):not(:where(.TokenSearch input,.twoip-editor-tool)) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 42px;
    height: auto;
    padding: 9px var(--twoip-control-padding-inline);
    padding-inline-end: calc(36px + var(--twoip-field-action-size, 0px));
    border: 1px var(--twoip-field-border-style, solid) var(--twoip-field-state, var(--twoip-outline));
    border-radius: var(--twoip-radius-small);
    background: var(--twoip-surface);
    background-image: none;
    color: var(--twoip-on-surface);
    opacity: 1;
    -webkit-text-fill-color: currentColor;
    box-shadow: none;
    font-size: var(--twoip-control-font-size);
    line-height: var(--twoip-control-line-height);
}
body :is(.t3-content,.modal,.twoip-form-group) textarea { min-height: 96px; resize: vertical; }

body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select):not([type="hidden"]):focus,
body :is(.t3-content,.modal,.twoip-city-popup) :where(input:not([type]),input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):not(:where(.TokenSearch input,.twoip-editor-tool)):focus,
body .twoip-form-group.is-focused .form-control,
body .twoip-form-group .twoip-file-control:focus-within {
  background-image: none; border: 2px var(--twoip-field-border-style, solid) var(--twoip-field-state, var(--twoip-field-focus, var(--twoip-primary))); padding: 8px calc(var(--twoip-control-padding-inline) - 1px); padding-inline-end: calc(35px + var(--twoip-field-action-size, 0px)); outline: none; box-shadow: none;
}
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,input):is(input:not([type]),input[type="text"],input[type="input"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]):not(:where(.TokenSearch input,.twoip-editor-tool)) {
    height: var(--twoip-control-height);
    min-height: var(--twoip-control-height);
    font-family: inherit;
    font-size: var(--twoip-control-font-size);
    line-height: var(--twoip-control-line-height);
    padding-block: calc((var(--twoip-control-height) - var(--twoip-control-line-height)) / 2 - 1px);
}
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,input):is(input:not([type]),input[type="text"],input[type="input"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]):not(:where(.TokenSearch input,.twoip-editor-tool)):focus {
    padding-block: calc((var(--twoip-control-height) - var(--twoip-control-line-height)) / 2 - 2px);
}
/* One-line floating notches: constrain only the visual label, keep its full accessible text. */
body .twoip-form-group.twoip-label-floating label.twoip-control-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
}
/* The existing is-empty/is-focused controller owns the floating-label state. */
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control) { position: relative; }
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control):is(.is-empty,.is-focused,:not(.is-empty)) label.twoip-control-label {
  position: absolute; top: var(--twoip-floating-notch-inset, 0px); left: 12px !important; margin: 0; padding: 0 4px; z-index: 1;
  max-width: calc(100% - var(--twoip-field-label-inset, 32px)); background: var(--twoip-field-surface, var(--twoip-surface));
  font-family: "2ip"; font-size: 13px !important; line-height: 18px;
  color: var(--twoip-field-state, var(--twoip-primary)); transform: translateY(-50%);
  transition: transform .15s ease, font-size .15s ease, color .15s ease;
  pointer-events: none;
}
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).is-empty:not(.is-focused) label.twoip-control-label {
  padding: 0; background: transparent; font-size: 16px !important;
  line-height: var(--twoip-control-line-height);
}
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).is-focused label.twoip-control-label { color: var(--twoip-field-state, var(--twoip-field-focus, var(--twoip-primary))); }
body .twoip-form-group.twoip-label-floating:has(textarea.form-control).is-empty:not(.is-focused) label.twoip-control-label { top: calc(var(--twoip-floating-notch-inset, 0px) + 12px); transform: none; }
@media (max-width: 480px) {
  body .twoip-form-group.twoip-label-floating:has(textarea.form-control).is-empty:not(.is-focused) label.twoip-control-label { top: calc(var(--twoip-floating-notch-inset, 0px) + 6px); }
}
/* Empty one-line labels share the control's center, not the group/hint height. */
body .twoip-form-group.twoip-label-floating:has(input.form-control).is-empty:not(.is-focused) label.twoip-control-label {
  top: calc(var(--twoip-control-height) / 2); transform: translateY(-50%);
}
/* One integrated focus border replaces the generic external keyboard ring. */
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control) :is(input,textarea).form-control:is(:focus,:focus-visible),
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).is-focused :is(input,textarea).form-control {
  border-width: 2px; border-color: var(--twoip-field-state, var(--twoip-field-focus, var(--twoip-primary))); padding-inline: 11px; padding-inline-end: calc(35px + var(--twoip-field-action-size, 0px));
  outline: none; box-shadow: none;
}
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control):not(.twoip-invalid):not(.twoip-valid):not(.twoip-warning) :is(input,textarea).form-control:not([aria-invalid="true"]):not(:where(.twoip-invalid *,.twoip-valid *,.twoip-warning *)):hover:not(:focus) { border-color: var(--twoip-on-surface-variant); }
body .twoip-form-group:is(.twoip-label-static,.twoip-label-placeholder) label.twoip-control-label {
  position: absolute; top: -23px; margin: 0; font-size: 14px !important; line-height: 20px;
  color: var(--twoip-on-surface-variant); transform: none;
}
body .twoip-form-group .material-input { display: none; }
body .twoip-form-group .twoip-help-block {
  position: static;
  display: block;
  visibility: hidden;
  pointer-events: none;
  padding: var(--twoip-help-padding, 0);
  margin-block: 0;
  white-space: normal;
  overflow: visible;
  width: auto;
  font-size: 14px !important;
  line-height: 1.4;
}
/* The control/support relationship owns spacing, including decorated controls. */
body .twoip-form-group :is(.form-control,.twoip-input-field,.twoip-readonly-field,.input-group):has(~ .twoip-help-block) {
  margin-bottom: 0;
}
body .twoip-form-group :is(.twoip-input-field,.twoip-readonly-field,.input-group):has(~ .twoip-help-block) .form-control {
  margin-bottom: 0;
}
body .twoip-form-group :is(.form-control,.twoip-input-field,.twoip-readonly-field,.input-group) ~ .twoip-help-block {
  margin-top: var(--twoip-form-support-gap, 8px);
}
body .twoip-form-group .twoip-form-support {
  visibility: visible;
  pointer-events: auto;
}

/* Keep the supporting-text slot stable, but remove hidden hints from focus/AT. */
body .twoip-form-group:is(:focus-within,.twoip-invalid,.twoip-warning) .twoip-help-block,
body .twoip-form-group:has(.form-control:is([aria-invalid="true"],.is-invalid,:user-invalid)) .twoip-help-block,
body .twoip-form-group .twoip-help-block:is([role="alert"],[aria-live="assertive"],.invalid-feedback) { visibility: visible; pointer-events: auto; }
/* Validation uses the same single border, including keyboard focus. */
body .twoip-form-group.twoip-warning { --twoip-field-focus: var(--twoip-warning); }
body .twoip-form-group.twoip-warning .form-control { border-color: var(--twoip-warning); }
body .twoip-form-group.twoip-warning :is(.twoip-control-label,.twoip-help-block) { color: var(--twoip-warning); }
body .twoip-form-group.twoip-valid { --twoip-field-focus: var(--twoip-success); }
body .twoip-form-group.twoip-valid .form-control { border-color: var(--twoip-success); background-image: none; }
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).twoip-valid label.twoip-control-label,
body .twoip-form-group.twoip-valid label.twoip-control-label { color: var(--twoip-success); }
body .twoip-form-group:is(.twoip-invalid,:has(.form-control:is([aria-invalid="true"],.is-invalid))) { --twoip-field-focus: var(--twoip-error); }
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).twoip-invalid :is(input,textarea).form-control,
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control) :is(input,textarea).form-control[aria-invalid="true"],
body .twoip-form-group.twoip-invalid .form-control,
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select)[aria-invalid="true"], body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select).is-invalid { --twoip-field-focus: var(--twoip-error); border-color: var(--twoip-error); background-image: none; }
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).twoip-invalid label.twoip-control-label,
body .twoip-form-group.twoip-invalid :is(.twoip-control-label,.twoip-help-block),
body .twoip-invalid label, body .invalid-feedback { color: var(--twoip-error); }
/* State changes only the border pattern; native behavior remains untouched. */
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select):is([readonly],:disabled,.readonly,.disabled),
body :is(.t3-content,.modal) :is(input,textarea,select):is([readonly],:disabled,.readonly,.disabled) { --twoip-field-border-style: dotted; }
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select)[readonly],
body :is(.t3-content,.modal) :is(input,textarea)[readonly] { user-select: text; }
body :is(.twoip-readonly-field,.twoip-input-field) { display: block; position: relative; min-width: 0; }
body .input-group > :is(.twoip-readonly-field,.twoip-input-field) { flex: 1 1 auto; width: 1%; }
body :is(.twoip-readonly-field,.twoip-input-field) > :is(.twoip-readonly-lock,.twoip-input-icon) {
  position: absolute; inset-inline-end: var(--twoip-control-padding-inline); top: 50%; transform: translateY(-50%);
  width: var(--twoip-control-icon-size); font-size: var(--twoip-control-icon-size); line-height: 1; margin: 0; color: var(--twoip-field-state, var(--twoip-primary));
  pointer-events: none; cursor: default;
}
body .twoip-readonly-field:not(:has(:is(input,textarea):is([readonly],:disabled))) > .twoip-readonly-lock { display: none; }
body .form-control::placeholder,
body :is(.t3-content,.modal,.twoip-city-popup) :where(input:not([type]),input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):not(:where(.TokenSearch input,.twoip-editor-tool))::placeholder {
    font: inherit;
    color: var(--twoip-on-surface-variant) !important;
    opacity: 1 !important;
}

/* Native fields retain their functional width, rows, autocomplete and select mechanics. */
body :is(.t3-content,.modal,.twoip-city-popup) :where(input:not([type]),input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):not(:where(.TokenSearch input,.twoip-editor-tool)):not([aria-invalid="true"]):not(:where(.twoip-invalid *,.twoip-valid *,.twoip-warning *)):hover:not(:focus) {
    border-color: var(--twoip-on-surface-variant);
}
body .twoip-form-group label.twoip-control-label { color: var(--twoip-field-state, var(--twoip-on-surface-variant)); }
/* Bootstrap input-group trims corner radii with high-specificity child selectors. */
body .twoip-form-group .input-group .form-control { border-radius: var(--twoip-radius-small) !important; }
body .twoip-form-group.twoip-label-floating:not(.port-field):has(:is(input,textarea):autofill) label.twoip-control-label { top: 0; padding: 0 4px; background: var(--twoip-field-surface, var(--twoip-surface)); font-size: 13px !important; line-height: 18px; transform: translateY(-50%); }
/* One trailing slot for canonical form listbox triggers. */
:root {
  --twoip-select-trailing-inset: var(--twoip-control-padding-inline);
  --twoip-select-icon-size: var(--twoip-control-icon-size);
  --twoip-select-icon-gap: 12px;
}
body :is(.t3-content,.modal) select:not([multiple]):not([hidden]),
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) .form-control.twoip-form-select-trigger {
  height: var(--twoip-control-height);
  min-height: var(--twoip-control-height);
  font-family: inherit;
  font-size: var(--twoip-control-font-size);
  line-height: var(--twoip-control-line-height);
  padding-block: calc((var(--twoip-control-height) - var(--twoip-control-line-height)) / 2 - 1px);
  padding-inline-start: var(--twoip-control-padding-inline);
  padding-inline-end: var(--twoip-select-trailing-inset);
  transition: border-color .15s ease;
}
body :is(.t3-content,.modal) select:not([multiple]):not([hidden]):focus,
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) .form-control.twoip-form-select-trigger:focus {
  padding-block: calc((var(--twoip-control-height) - var(--twoip-control-line-height)) / 2 - 2px);
  padding-inline-start: calc(var(--twoip-control-padding-inline) - 1px);
  padding-inline-end: var(--twoip-select-trailing-inset);
}
body :is(.t3-content,.modal) select:not([data-twoip-select]) {
  appearance: none;
}
body :is(.twoip-form-select-trigger > .twoip-disclosure-arrow,.twoip-select-control > .twoip-disclosure-arrow) {
  display: grid;
  place-items: center;
  width: var(--twoip-select-icon-size);
  height: var(--twoip-select-icon-size);
  font-size: var(--twoip-select-icon-size);
  line-height: 1;
  flex: 0 0 var(--twoip-select-icon-size);
}
body .twoip-form-select-trigger {
  align-items: center;
  gap: var(--twoip-select-icon-gap);
}
body .twoip-form-select-trigger .twoip-disclosure-arrow { color: var(--twoip-field-state, var(--twoip-outline)); }
body .twoip-form-select-trigger:focus .twoip-disclosure-arrow { color: var(--twoip-field-state, var(--twoip-primary)); }
body .twoip-form-select-trigger[aria-invalid="true"] .twoip-disclosure-arrow { color: var(--twoip-error); }
/* Dependent selects keep their geometry; only the in-control loading glyph changes. */
body :is(.twoip-form-select-trigger,.twoip-select-control)[aria-busy=true] { position: relative; }
body :is(.twoip-form-select-trigger,.twoip-select-control)[aria-busy=true] > .twoip-disclosure-arrow { visibility: hidden; }
body .twoip-select-spinner { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; inline-size: var(--twoip-select-icon-size); block-size: var(--twoip-select-icon-size); pointer-events: none; }
body .twoip-select-spinner[hidden] { display: none; }
body .twoip-select-spinner > .twoip-icon { position: static; margin: 0; font-size: var(--twoip-select-icon-size); line-height: 1; color: var(--twoip-primary); }
body .twoip-form-group.twoip-label-floating:has(select:not([multiple])) { position: relative; }
body .twoip-form-group.twoip-label-floating:has(select:not([multiple])) > label.twoip-control-label {
  position: absolute; top: 0; inset-inline-start: 12px; transform: translateY(-50%); margin: 0; padding: 0 4px;
  max-width: calc(100% - 48px); font-size: 13px; line-height: 18px; background: var(--twoip-surface);
  color: var(--twoip-field-state, var(--twoip-outline)); z-index: 1;
}
body :is(.t3-content,.modal) label.error { color: var(--twoip-error); }

/* A leading addon and floating field share one row; the label anchors to the field column. */
body .twoip-form-group.twoip-label-floating .input-group:has(> .input-group-text):has(> label.twoip-control-label) { display: grid; grid-template-columns: auto minmax(0, 1fr); position: relative; }
body .twoip-form-group.twoip-label-floating .input-group:has(> .input-group-text):has(> label.twoip-control-label) > .input-group-text { grid-column: 1; grid-row: 1; }
body .twoip-form-group.twoip-label-floating .input-group:has(> .input-group-text):has(> label.twoip-control-label) > :is(.form-control,.twoip-readonly-field,.twoip-input-field) { grid-column: 2; grid-row: 1; width: 100%; }
body .twoip-form-group.twoip-label-floating .input-group:has(> .input-group-text):has(> label.twoip-control-label) > label.twoip-control-label { grid-column: 2; grid-row: 1; }

/* One trailing semantic slot; native control skin and height remain authoritative. */
body .twoip-input-field { margin-bottom: 7px; }
body :is(.twoip-input-field,.twoip-readonly-field) > input.form-control, body :is(.twoip-input-field,.twoip-readonly-field) > input { display: block; width: 100%; margin-bottom: 0; }
body .twoip-input-field > .twoip-input-icon { height: var(--twoip-control-icon-size); display: grid; place-items: center; }
/* A 44px action plus its external focus ring fits inside a 56px field.
   The semantic trailing icon remains in the canonical 16px slot. */
body .twoip-form-group:has(.twoip-input-with-action),
body .twoip-input-field.twoip-input-with-action {
  --twoip-control-height: 56px;
  --twoip-field-action-size: 48px;
}
body .twoip-input-field > .input-password-toggle {
  position: absolute;
  inset-inline-end: calc(var(--twoip-control-padding-inline) + var(--twoip-control-icon-size) + 8px);
  inset-block: 0;
  margin-block: auto;
}
body .twoip-form-group:has(.twoip-input-field) { --twoip-field-label-inset: 48px; }
body .twoip-form-group:has(.twoip-input-with-action) { --twoip-field-label-inset: 92px; }
/* Native Joomla modify controls stay siblings; the icon anchors to the input row. */
body .twoip-input-field:has(> .input-password-modify) { display: grid; grid-template-columns: minmax(0, 1fr); }
body .twoip-input-field > input:has(~ .input-password-modify) { grid-area: 1 / 1; }
body .twoip-input-field > .input-password-modify { grid-row: 2; justify-self: start; }
body .twoip-input-field:has(> .input-password-modify) > .twoip-input-icon { grid-area: 1 / 1 / 2 / 2; }

/* Shared state transitions never affect field metrics or native value ink. */
body .twoip-form-group .form-control:not(:is([readonly],:disabled,.readonly,.disabled)) { transition: border-color .15s ease; }
body .twoip-form-group:has(.form-control:not(:is([readonly],:disabled,.readonly,.disabled))) label.twoip-control-label { transition: transform .15s ease, font-size .15s ease, color .15s ease; }
body .twoip-input-field:has(> input:not(:is([readonly],:disabled,.readonly,.disabled))) > .twoip-input-icon { transition: color .15s ease; }
body .twoip-form-group:has(:is(.form-control,.twoip-input-field > input)) .input-group-text .twoip-icon { color: var(--twoip-field-state, var(--twoip-primary)); transition: color .15s ease; }

/* Search uses the canonical field without a legacy leading-addon column. */
body .twoip-search-control { position: relative; min-width: 0; width: 100%; }

/* Multiple token entry is a chip-field variant, not a single-value listbox. */
body .Tokenize.Tokenize ul.TokensContainer.form-control { box-sizing: border-box; min-height: 44px; padding: 9px 12px; border: 1px solid var(--twoip-outline); border-radius: var(--twoip-radius-small); background: var(--twoip-surface); color: var(--twoip-on-surface); }
body .Tokenize.Tokenize:focus-within ul.TokensContainer.form-control { border-color: var(--twoip-primary); }
body .Tokenize.Tokenize.Disabled ul.TokensContainer.form-control { border: 1px dotted var(--twoip-outline); background: var(--twoip-surface); }
body .Tokenize ul.TokensContainer li.Token { color: var(--twoip-on-surface); background: var(--twoip-surface-container); border-color: var(--twoip-outline-variant); border-radius: var(--twoip-radius-small); }
body .Tokenize ul.Dropdown { max-height: min(60vh, 360px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--twoip-outline-variant); border-radius: var(--twoip-radius-medium); background: var(--twoip-surface); color: var(--twoip-on-surface); box-shadow: var(--twoip-elevation-2); }
body .Tokenize ul.Dropdown li { min-height: 44px; padding: 10px 12px; color: var(--twoip-on-surface); }
body .Tokenize ul.Dropdown li.Hover { background: var(--twoip-primary-container); color: var(--twoip-on-primary-container); }
@media (max-width: 480px) { body .Tokenize.Tokenize ul.TokensContainer.form-control { min-height: 56px; } }

/* External grid labels have their own row contract. Floating legends, radio/checkbox
   labels and supporting text do not opt in. Label height tracks the control token. */
body .twoip-external-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
body .twoip-external-form-row > .twoip-external-label {
  margin-block: 0;
  padding-block: 0;
}
@media (min-width: 768px) {
  body .twoip-external-form-row > .twoip-external-label:is([class*="col-md-"]) {
    display: flex;
    align-items: center;
    min-height: var(--twoip-control-height);
  }
}
@media (min-width: 992px) {
  body .twoip-external-form-row > .twoip-external-label:is([class*="col-lg-"]) {
    display: flex;
    align-items: center;
    min-height: var(--twoip-control-height);
  }
}

/* Grid labels/controls stack before their own Bootstrap column breakpoint.
   Legacy float wrappers otherwise shrink-wrap columns on narrow screens. */
@media (max-width: 767.98px) {
  body .twoip-external-form-row:has(> .twoip-external-label[class*="col-md-"]) > .twoip-current-grid {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  body .twoip-external-form-row:has(> .twoip-external-label[class*="col-lg-"]) > .twoip-current-grid {
    width: 100%;
  }
}

/* Browser popup selects expose no dependable open state: one static FA7 down slot. */
body .twoip-native-select { --twoip-select-border-width: 1px; display: inline-grid; grid-template-columns: minmax(0, 1fr); align-items: center; max-width: 100%; }
body :is(.t3-content,.modal) .twoip-native-select > select:not([multiple]):not([hidden]) { grid-area: 1 / 1; width: 100%; margin: 0; appearance: none; background-image: none; padding-inline-end: calc(var(--twoip-select-trailing-inset) + var(--twoip-select-icon-size) + var(--twoip-select-icon-gap)); }
body .twoip-native-select > .twoip-chevron { --twoip-chevron-size: var(--twoip-select-icon-size); grid-area: 1 / 1; justify-self: end; margin-inline-end: calc(var(--twoip-select-trailing-inset) + var(--twoip-select-border-width)); pointer-events: none; }

body .twoip-native-select:has(> select:focus) { --twoip-select-border-width: 2px; }

/* Textarea notches reserve their own half-label inset inside the field group. */
body .twoip-form-group.twoip-label-floating:has(textarea.form-control) { --twoip-floating-notch-inset:9px;padding-block-start:var(--twoip-floating-notch-inset); }
body .twoip-form-group.twoip-label-floating:has(textarea.form-control) label.twoip-control-label { top:var(--twoip-floating-notch-inset); }
body .twoip-readonly-field > textarea.form-control { padding-inline-end:calc(var(--twoip-control-padding-inline) + var(--twoip-control-icon-size) + 8px); }

/* Native file controls reuse .form-control skin; only layout and hidden picker differ. */
body .twoip-form-group .twoip-file-control.form-control { position:relative; display:flex; align-items:center; gap:var(--twoip-service-option-row-gap); height:var(--twoip-control-height); min-height:var(--twoip-control-height); padding:0 var(--twoip-control-padding-inline); cursor:pointer; }
body .twoip-form-group .twoip-file-control:focus-within { --twoip-field-state:var(--twoip-primary); padding-inline:calc(var(--twoip-control-padding-inline) - 1px); }
body .twoip-form-group .twoip-file-control:is(.is-invalid,[aria-invalid="true"]):focus-within { --twoip-field-state:var(--twoip-error); }
body .twoip-form-group .twoip-file-control:has(input:is(:disabled,[readonly])),body .twoip-form-group .twoip-file-control:is([aria-disabled="true"],[aria-readonly="true"]) { --twoip-field-state:var(--twoip-outline); border-style:dotted; cursor:default; }
body .twoip-file-control input[type=file] { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); opacity:0; }
.twoip-file-control [data-file-name] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.twoip-file-control .twoip-icon { position:static; flex:none; margin:0; font-size:var(--twoip-control-icon-size); line-height:1; color:var(--twoip-primary); }
body .twoip-form-group .twoip-file-control + .twoip-help-block { visibility:visible; pointer-events:auto; margin-block-start:4px; color:var(--twoip-on-surface-variant); display:flex; align-items:center; min-block-size:var(--twoip-control-height); padding-block:0; box-sizing:border-box; }
.twoip-logo-preview { display:inline-block; width:250px; height:75px; max-width:100%; object-fit:contain; }
/* Hints keep their natural wrapped height in both focus states; no artificial spacer. */
body .twoip-form-group.twoip-search-field { margin-block:var(--twoip-service-form-section-gap) 0; padding:0; min-block-size:0; }
body .twoip-form-group.twoip-search-field .form-control { margin-block:0; }
body .twoip-form-group.twoip-field--contextual-support .twoip-help-block { display:block; visibility:hidden; pointer-events:none; padding:0; min-block-size:0; margin:var(--twoip-service-option-row-gap) 0 0; font-size:var(--twoip-type-label) !important; }
body .twoip-form-group.twoip-field--contextual-support:is(:focus-within,.twoip-invalid,.twoip-warning) .twoip-help-block,
body .twoip-form-group.twoip-field--contextual-support:has(.form-control:is([aria-invalid="true"],.is-invalid,:user-invalid)) .twoip-help-block,
body .twoip-form-group.twoip-field--contextual-support .twoip-help-block:is([role="alert"],[aria-live="assertive"],.invalid-feedback) { visibility:visible; pointer-events:auto; }
body .twoip-search-field + :is(.twoip-scope-switch,[data-twoip-single-panel-tabs]) { margin-block:var(--twoip-service-form-section-gap) 0; }