/* Load after page and component styles. Only control geometry is migrated here. */
:root {
  --control-height-admin: 36px;
  --control-height-user: 40px;
  --control-height-compact: 32px;
  --control-height-touch: 44px;
  --control-check-size: 18px;
  --control-textarea-min-height: 96px;
  --control-font-admin: 13px;
  --control-font-user: 14px;
  --control-size: var(--control-height-user);
  --control-field-font-size: var(--control-font-user);
  --control-padding-block: 6px;
  --control-padding-inline: 12px;
  --control-line-height: 1.4;
  --control-label-gap: 6px;
}

body:is(.pine-admin,.theme-admin) {
  --control-size: var(--control-height-admin);
  --control-field-font-size: var(--control-font-admin);
}

body:is(.pine-admin,.theme-admin) .admin-gate-card {
  --control-size: var(--control-height-user);
  --control-field-font-size: var(--control-font-user);
}

body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.auth-page,.console-page,.support-page) label {
  row-gap: var(--control-label-gap) !important;
}

/* Positive input types keep hidden, upload, native picker and command inputs out.
   This also reaches node-editor, ud-dialog, users-filters, onboarding-guide,
   knowledge-tools and support-search without changing their existing widths. */
body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.auth-page,.console-page,.support-page) :where(
  input:not([type]),
  input:is([type="text"],[type="search"],[type="email"],[type="password"],[type="tel"],[type="url"],[type="number"],[type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"]),
  select:not([multiple]):is(:not([size]),[size="0"],[size="1"])
):not([hidden]) {
  box-sizing: border-box;
  height: var(--control-size) !important;
  min-height: var(--control-size) !important;
  padding-block: var(--control-padding-block) !important;
  padding-inline: var(--control-padding-inline) !important;
  font-size: var(--control-field-font-size) !important;
  line-height: var(--control-line-height) !important;
}

/* Known commands only: not every native button is a form command. */
body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.auth-page,.console-page,.support-page) :where(
  .button,
  .console-button,
  .console-icon-button,
  .ud-button,
  .users-clear,
  .users-more,
  .admin-list-icon,
  .node-editor .admin-icon,
  .pine-node-reset,
  .pine-node-expand,
  .onboarding-guide__action,
  .onboarding-guide__refresh,
  .support-icon:not(.support-back),
  .support-search button,
  .support-chat-actions button,
  .support-send,
  .support-load,
  .support-latest,
  .support-pending button,
  .support-quick-insert button,
  .support-tool-heading button,
  .support-variable-tools button,
  .support-delete-reply,
  .support-editor-actions button,
  .support-account-failure button,
  .support-history-toolbar button,
  .subscription-import-options button
):where(:not([role="tab"],[role="tablist"] *,.tab-row *,.ud-tabs *,.client-guides__tabs *,.support-customer-tabs *)) {
  box-sizing: border-box;
  height: auto !important;
  min-height: var(--control-size) !important;
  padding-block: var(--control-padding-block) !important;
  padding-inline: var(--control-padding-inline) !important;
  line-height: var(--control-line-height) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* The existing admin login has a more-specific important minimum. */
body.pine-admin.theme-admin .admin-gate-card .button--primary {
  min-height: var(--control-size) !important;
}

body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.auth-page,.console-page,.support-page) :where(
  .button--small,
  .console-button--small,
  .admin-list-pager,
  .table-actions,
  .node-table-actions,
  .users-actions,
  .ud-table,
  .pine-referral-pagination
) {
  --control-size: var(--control-height-compact);
  --control-padding-block: 4px;
}

/* Icons are the only command controls whose inline size is standardized. */
body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.auth-page,.console-page,.support-page) :where(
  .pine-icon-button,
  .console-icon-button,
  .admin-list-icon,
  .node-editor .admin-icon,
  .ud-icon-button,
  .users-more,
  .pine-node-reset,
  .pine-node-expand,
  .onboarding-guide__refresh,
  .support-icon:not(.support-back),
  .support-delete-reply
) {
  box-sizing: border-box;
  width: var(--control-size) !important;
  height: var(--control-size) !important;
  min-height: var(--control-size) !important;
  flex-basis: var(--control-size) !important;
  flex-shrink: 0;
  padding: 0 !important;
}

body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.auth-page,.console-page,.support-page) :where(input[type="checkbox"],input[type="radio"]):not([hidden]) {
  box-sizing: border-box;
  width: var(--control-check-size) !important;
  height: var(--control-check-size) !important;
  min-height: var(--control-check-size) !important;
  padding: 0 !important;
  flex-shrink: 0;
}

body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.auth-page,.console-page,.support-page) textarea:not([hidden]) {
  box-sizing: border-box;
  height: auto !important;
  min-height: var(--control-textarea-min-height) !important;
  padding-block: var(--control-padding-block) !important;
  font-size: var(--control-field-font-size) !important;
  resize: vertical;
}

/* List boxes must not inherit the legacy global select height of 50px. */
body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.auth-page,.console-page,.support-page) :where(
  select[multiple],
  select[size]:not([size="0"]):not([size="1"])
):not([hidden]) {
  box-sizing: border-box;
  height: auto !important;
  min-height: var(--control-textarea-min-height) !important;
  font-size: var(--control-field-font-size) !important;
}

body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.support-page) .support-composer textarea {
  min-height: 64px !important;
  max-height: 160px !important;
}

/* Reserve the icon track, not a text-field width, in the quick-reply editor. */
body:is(.pine-user,.theme-user,.pine-admin,.theme-admin,.support-page) .support-reply-fields,
body.pine-admin.theme-admin .support-reply-fields {
  grid-template-columns: minmax(0,1fr) var(--control-size);
}

body:is(.pine-admin,.theme-admin) .users-actions {
  height: auto;
  min-height: var(--control-size);
}

/* Pagination keeps its page-input and page-size widths, including inline ones. */
body:is(.pine-user,.theme-user,.pine-admin,.theme-admin) :where(.admin-list-pager,.admin-list-page-buttons,.pine-referral-pagination) {
  flex-wrap: wrap;
}

/* Preserve the narrow numeric fields and the select's native-arrow space. */
body:is(.pine-admin,.theme-admin) .admin-list-pager :where(input:not([type]),input:is([type="text"],[type="number"])):not([hidden]) {
  padding-inline: 6px !important;
}
body:is(.pine-admin,.theme-admin) .admin-list-pager select:not([multiple]):is(:not([size]),[size="0"],[size="1"]) {
  padding-inline: 6px 20px !important;
}

@media (max-width:700px) {
  :root {
    --control-height-admin: var(--control-height-touch);
    --control-height-user: var(--control-height-touch);
    --control-height-compact: var(--control-height-touch);
    --control-font-admin: 16px;
    --control-font-user: 16px;
    --control-label-gap: 8px;
  }
  body:is(.pine-admin,.theme-admin) .admin-list-page-buttons {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}