/* Shared field sizing for authored forms, not third-party sign-in widgets.
   Keep native select behavior, palettes, focus, and multiline fields intact.
   Style the closed select so its padding is not replaced by OS-native chrome. */
@media screen {
  :is(
    .builder-panel,
    .resource-filter,
    .story-contribute-form,
    .turn-daily-editor,
    .account-checkins,
    .admin-publish-form,
    .mentor-followup-form,
    .content-editor,
    .commitment-sharing,
    .member-import-choice,
    .group-form,
    :where(#encouragement-form)
  ) :is(
    select:not([multiple]):is(:not([size]),[size="0"],[size="1"]),
    input:not([type]),
    input:is([type="text"],[type="search"],[type="email"],[type="tel"],[type="url"],[type="number"],[type="date"])
  ) {
    box-sizing:border-box;
    min-width:0;
    height:auto;
    min-height:3.375rem;
    padding:.8125rem .9375rem;
    line-height:1.5;
  }

  /* The control remains a real select: keyboard, touch picker, labels and
     validation are native. The two CSS triangles are a decorative chevron. */
  :is(
    .builder-panel,
    .resource-filter,
    .story-contribute-form,
    .turn-daily-editor,
    .account-checkins,
    .admin-publish-form,
    .mentor-followup-form,
    .content-editor,
    .commitment-sharing,
    .member-import-choice,
    .group-form,
    :where(#encouragement-form),
    .board-state-filter
  ) select:not([multiple]):is(:not([size]),[size="0"],[size="1"]) {
    -webkit-appearance:none;
    appearance:none;
    padding-inline-end:2.75rem;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:right 1.125rem center,right .75rem center;
    background-size:.375rem .375rem;
    background-repeat:no-repeat;
  }

  /* The Board's inline filter belongs with compact filter pills, not the form. */
  .board-state-filter select:not([multiple]):is(:not([size]),[size="0"],[size="1"]) {
    box-sizing:border-box;
    min-width:0;
    height:auto;
    min-height:2.75rem;
    padding-block:.5625rem;
    padding-inline-start:.75rem;
    line-height:1.5;
  }

  :is(
    .builder-panel,
    .resource-filter,
    .story-contribute-form,
    .turn-daily-editor,
    .account-checkins,
    .admin-publish-form,
    .mentor-followup-form,
    .content-editor,
    .commitment-sharing,
    .member-import-choice,
    .group-form,
    :where(#encouragement-form),
    .board-state-filter
  ) select:not([multiple]):is(:not([size]),[size="0"],[size="1"]):disabled {
    opacity:.6;
    cursor:not-allowed;
  }
}

/* Readable phone/tablet field text also avoids small-font focus zoom in mobile
   browsers. Typography is separate from sizing, including for textareas. */
@media screen and (max-width:960px) {
  :is(
    .builder-panel,
    .resource-filter,
    .story-contribute-form,
    .turn-daily-editor,
    .account-checkins,
    .admin-publish-form,
    .mentor-followup-form,
    .content-editor,
    .commitment-sharing,
    .member-import-choice,
    .group-form,
    :where(#encouragement-form),
    .board-state-filter
  ) :is(
    select:not([multiple]):is(:not([size]),[size="0"],[size="1"]),
    input:not([type]),
    input:is([type="text"],[type="search"],[type="email"],[type="tel"],[type="url"],[type="number"],[type="date"]),
    textarea
  ) {
    font-size:max(16px,1rem);
  }
}

/* Let the OS draw a high-contrast arrow instead of relying on a CSS image. */
@media screen and (forced-colors:active) {
  :is(
    .builder-panel,
    .resource-filter,
    .story-contribute-form,
    .turn-daily-editor,
    .account-checkins,
    .admin-publish-form,
    .mentor-followup-form,
    .content-editor,
    .commitment-sharing,
    .member-import-choice,
    .group-form,
    :where(#encouragement-form),
    .board-state-filter
  ) select:not([multiple]):is(:not([size]),[size="0"],[size="1"]) {
    -webkit-appearance:auto;
    appearance:auto;
    background-image:none;
    opacity:1;
  }
}