/* Operational typography only. Keep the handwritten nature branding and PDF originals. */
/* All list controls, including late-rendered dialogs and suggestion lists.
   Pin the embedded Thai font; do not change values, sizes or native events. */
@media screen {
  :root :is(select, option, optgroup, datalist, input[list], .select-control,
    [role="listbox"], [role="listbox"] *, [role="option"], [role="option"] *) {
    font-family: "TH Sarabun", "TH SarabunPSK", serif !important;
  }
  @supports (appearance: base-select) and selector(select::picker(select)) {
    :root select::picker(select),
    :root select::picker-icon,
    :root select option::checkmark {
      font-family: "TH Sarabun", "TH SarabunPSK", serif !important;
    }
  }
}
@media screen {
  :root { --font-sans: "TH Sarabun", "TH SarabunPSK", serif; }

  :root :is(button, input, select, textarea, option, optgroup),
  :root .nature-login .auth-card,
  :root .nature-login .auth-card :is(.eyebrow, p, label, .version, button, input, select, textarea) {
    font-family: var(--font-sans);
  }

  :root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  :root :is(select, textarea, option, optgroup) {
    font-size: 25px;
    font-weight: 700;
  }

  /* Render options with the embedded font rather than relying on an OS popup.
     Unsupported browsers retain their standard select and original change/validation behavior. */
  @supports (appearance: base-select) and selector(select::picker(select)) {
    select:not([multiple]):not([size]), select[size="1"] {
      appearance: base-select;
    }
    select:not([multiple]):not([size])::picker(select), select[size="1"]::picker(select) {
      appearance: base-select;
      font-family: var(--font-sans);
      font-size: 25px;
      font-weight: 700;
      line-height: 1.4;
      min-width: anchor-size(width);
      max-width: calc(100vw - 24px);
      max-height: min(320px, 60vh);
      overflow-y: auto;
      padding: 4px;
      border: 1px solid #b9dbea;
      border-radius: 7px;
      background: #fff;
      color: #154c70;
      box-shadow: 0 5px 18px rgba(7, 53, 99, .12);
    }
    select::picker-icon { margin-inline-start: auto; color: #087447; }
    select:not([multiple]):not([size]) option, select[size="1"] option {
      min-height: 38px;
      padding: 4px 10px;
      white-space: normal;
      overflow-wrap: anywhere;
      border-radius: 4px;
    }
    select option:is(:checked, :hover, :focus) {
      background: #e3f6ed;
      color: #075b3b;
    }
    select option:disabled { color: #637d8c; }
    select option::checkmark { color: #087447; }
  }
}