/* gc1zc only. Apply through the editor's CSS Global field.
   Theme colors, fonts, sizes and spacing live in setting.json.
   Scope to site content and its filter portal, including the editor preview. */
:where(main, #headlessui-portal-root) {
  --primary-text-contrast-500: #10181f;
  --radius: 0.75rem;
  --gc-focus: var(--ring);
  --gc-control-border: var(--border-secondary);
  font-family: var(--font-serif);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:where(main, #headlessui-portal-root) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

:where(main, #headlessui-portal-root)
  :is(button, input, select, textarea, [role="combobox"]) {
  font-family: var(--font-serif);
}

:where(main, #headlessui-portal-root)
  :is(button, [role="button"], [role="combobox"]) {
  min-height: 44px;
}

:where(main, #headlessui-portal-root)
  :is(a, button, input, select, textarea, [role="button"], [role="combobox"]) {
  transition-property:
    color, background-color, border-color, box-shadow, opacity;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
  -webkit-tap-highlight-color: transparent;
}

:where(main, #headlessui-portal-root)
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gc-focus) !important;
  outline-offset: 3px;
  scroll-margin-block: 6rem;
}

:where(main, #headlessui-portal-root)
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
        [type="hidden"]
      ),
    select,
    textarea
  ) {
  min-height: 44px;
  border: 1px solid var(--gc-control-border);
  border-radius: var(--border-default);
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 1rem;
  caret-color: var(--fg-accent);
}

:where(main, #headlessui-portal-root) :is(input, textarea)::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}

:where(main, #headlessui-portal-root)
  :is(input, select, textarea):enabled:hover {
  border-color: var(--fg-secondary);
}

:where(main, #headlessui-portal-root)
  :is(input, select, textarea):focus-visible {
  border-color: var(--gc-focus);
}

:where(main, #headlessui-portal-root)
  :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--primary-600);
}

:where(main, #headlessui-portal-root)
  :is(input[type="checkbox"], input[type="radio"]) {
  border-color: var(--gc-control-border);
}

:where(main, #headlessui-portal-root)
  :is(input[type="checkbox"], input[type="radio"]):checked {
  border-color: var(--fg-accent);
}

:where(main, #headlessui-portal-root)
  :is(
    button:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled,
    [aria-disabled="true"]
  ) {
  cursor: not-allowed;
  opacity: 0.55;
}

:where(main, #headlessui-portal-root) ::selection {
  color: #10181f;
  background: #fed7aa;
}

@media (prefers-reduced-motion: reduce) {
  :where(main, #headlessui-portal-root) *,
  :where(main, #headlessui-portal-root) *::before,
  :where(main, #headlessui-portal-root) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}