/* Public v4 form rendering mirrors the designer canvas's rhythm and rounded controls while
   remaining theme-neutral. All selectors and customization properties are package-prefixed,
   except the public --scroll-margin-top (see the post-back scroll targets below). */

.hui-form {
  --hui-color-text: currentColor;
  --hui-color-muted: color-mix(in srgb, currentColor 62%, transparent);
  --hui-color-border: color-mix(in srgb, currentColor 20%, transparent);
  --hui-color-surface: transparent;
  --hui-color-accent: #3544b1;
  --hui-color-danger: #b42318;
  --hui-radius-control: 8px;
  --hui-space-block: 1.15rem;
  color: var(--hui-color-text);
  font: inherit;
  line-height: 1.45;
}

.hui-form *,
.hui-form *::before,
.hui-form *::after {
  box-sizing: border-box;
}

.hui-form__hp {
  position: absolute !important;
  top: auto !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

.hui-form__items {
  display: flex;
  flex-direction: column;
  gap: var(--hui-space-block);
}

.hui-heading {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}

.hui-heading--1 {
  font-size: 1.5rem;
}

.hui-heading--2 {
  font-size: 1.25rem;
}

.hui-heading--3 {
  font-size: 1.1rem;
}

.hui-text,
.hui-field__child {
  font-size: 0.95rem;
}

.hui-text p,
.hui-field__child p {
  margin: 0;
  white-space: pre-wrap;
}

.hui-text p + p,
.hui-field__child p + p {
  margin-top: 0.75rem;
}

/* The align setting of a heading or text block; left needs no class. */
.hui-align-center {
  text-align: center;
}

.hui-align-right {
  text-align: right;
}

.hui-divider {
  width: 100%;
  height: 0;
  margin: 0.25rem 0;
  border: 0;
  border-top: 1px solid var(--hui-color-border);
}

/* Fills the width it is given (the form, or its grid column); a site caps it in its own CSS. */
.hui-image {
  margin: 0;
}

.hui-image img {
  display: block;
  width: 100%;
  height: auto;
}

.hui-image figcaption {
  margin-top: 0.5rem;
  color: var(--hui-color-muted);
  font-size: 0.95rem;
}

.hui-grid {
  display: grid;
  grid-template-columns: var(--hui-grid-columns, 1fr);
  width: 100%;
  min-width: 0;
  gap: 1.25rem;
  align-items: start;
}

.hui-grid__column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--hui-space-block);
}

.hui-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
}

.hui-field__label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.hui-field__required {
  flex: none;
  color: var(--hui-color-muted);
  font-size: 0.7rem;
}

.hui-input {
  display: block;
  width: min(100%, 420px);
  min-height: 38px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hui-color-border);
  border-radius: var(--hui-radius-control);
  outline: 0;
  background: var(--hui-color-surface);
  color: inherit;
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.hui-input::placeholder {
  color: var(--hui-color-muted);
  opacity: 1;
}

.hui-input:focus {
  border-color: var(--hui-color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hui-color-accent) 18%, transparent);
}

.hui-input--textarea {
  min-height: 84px;
  resize: vertical;
}

.hui-choices,
.hui-scale,
.hui-rating {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hui-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.hui-choices--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hui-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
}

.hui-choice input,
.hui-consent input {
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  accent-color: var(--hui-color-accent);
}

/* GitHub #21: the Other text box shows only while the Other choice is picked. fill.js also
   disables it then, so it posts nothing; :has keeps this right before the script runs and without
   it. */
.hui-choices:not(:has([data-hui-other-choice]:checked)) > .hui-choice__other,
.hui-input--select:not(:has([data-hui-other-choice]:checked)) + .hui-choice__other {
  display: none;
}

.hui-choices > .hui-choice__other {
  width: min(100% - 16px - 0.65rem, 420px);
  margin-inline-start: calc(16px + 0.65rem);
}

.hui-choice--pill {
  position: relative;
}

.hui-choice--pill input {
  position: absolute;
  opacity: 0;
}

.hui-choice--pill span {
  min-width: 4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--hui-color-border);
  border-radius: var(--hui-radius-control);
  color: var(--hui-color-muted);
  text-align: center;
}

.hui-choice--pill input:checked + span,
.hui-choice--pill input:focus-visible + span {
  border-color: var(--hui-color-accent);
  color: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hui-color-accent) 16%, transparent);
}

/* GitHub #27: options with images render as a grid of equal-width cards. Each card is still the
   option's label around its own radio or checkbox; the image sits above the input and text. A
   card without an image (the Other choice, or an option given none) has no image area: it
   stretches to its row's height with its input and text at the bottom, in line with the cards
   beside it. 140px columns keep two cards side by side on a 320px phone. */
.hui-choices--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  align-items: stretch;
  gap: 0.75rem;
}

.hui-choice--card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--hui-color-border);
  border-radius: var(--hui-radius-control);
}

.hui-choice--card input {
  grid-row: 2;
  grid-column: 1;
}

.hui-choice--card span {
  grid-row: 2;
  grid-column: 2;
}

/* Every image area has the same 4:3 frame, so cards line up whatever shape their pictures are
   (the packaged placeholders are 4:3, 16:9 and square). The picture is contained and centered in
   the frame, never cropped or stretched; the faint tint shows the frame around a picture of
   another shape. */
.hui-choice__image {
  display: block;
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  border-radius: calc(var(--hui-radius-control) - 2px);
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.hui-choice--card:has(input:checked),
.hui-choice--card:has(input:focus-visible) {
  border-color: var(--hui-color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hui-color-accent) 16%, transparent);
}

.hui-choices--cards > .hui-choice__other {
  grid-column: 1 / -1;
  width: min(100%, 420px);
  margin-inline-start: 0;
}

.hui-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
}

.hui-consent input {
  margin-top: 0.2em;
}

.hui-consent__text > :first-child,
.hui-ending__message > :first-child {
  margin-top: 0;
}

.hui-consent__text > :last-child,
.hui-ending__message > :last-child {
  margin-bottom: 0;
}

.hui-scale {
  width: fit-content;
}

.hui-scale__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hui-scale__option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.hui-scale__option input {
  position: absolute;
  opacity: 0;
}

.hui-scale__option span {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hui-color-border);
  border-radius: 6px;
  color: var(--hui-color-muted);
}

.hui-scale__option input:checked + span,
.hui-scale__option input:focus-visible + span,
.hui-scale__option--selected span {
  border-color: var(--hui-color-accent);
  background: color-mix(in srgb, var(--hui-color-accent) 10%, transparent);
  color: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hui-color-accent) 16%, transparent);
}

.hui-scale__labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.3rem;
  color: var(--hui-color-muted);
  font-size: 0.75rem;
}

.hui-scale__labels span:last-child {
  text-align: right;
}

.hui-rating__options {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hui-rating__option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.hui-rating__option input {
  position: absolute;
  opacity: 0;
}

.hui-rating__option > span[aria-hidden] {
  color: var(--hui-color-border);
  font-size: 1.55rem;
  line-height: 1;
  transition: color 120ms ease, transform 120ms ease;
}

.hui-rating__option:hover > span[aria-hidden],
.hui-rating__option input:checked + span,
.hui-rating__option input:focus-visible + span,
.hui-rating__option--selected > span[aria-hidden],
.hui-rating__option--preview > span[aria-hidden] {
  color: var(--hui-color-accent);
  transform: scale(1.08);
}

.hui-upload {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
}

.hui-upload__dropzone {
  display: flex;
  width: min(100%, 420px);
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.4rem 1rem;
  border: 1px dashed color-mix(in srgb, currentColor 32%, transparent);
  border-radius: var(--hui-radius-control);
  color: var(--hui-color-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.hui-upload__dropzone:hover,
.hui-upload__dropzone--over {
  border-color: var(--hui-color-accent);
  background: color-mix(in srgb, var(--hui-color-accent) 6%, transparent);
}

.hui-upload__icon {
  width: 1.6rem;
  height: 1.6rem;
}

.hui-upload__prompt {
  font-size: 0.95rem;
}

/* The native input is the no-JS base layer; enhancement hides it and the dropzone stages. */
.hui-upload__input {
  max-width: 100%;
  margin-top: 0.4rem;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
}

.hui-upload--enhanced .hui-upload__input {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hui-upload__input:focus-visible {
  outline: 2px solid var(--hui-color-accent);
  outline-offset: 2px;
}

.hui-upload--enhanced .hui-upload__dropzone:has(.hui-upload__input:focus-visible) {
  border-color: var(--hui-color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hui-color-accent) 18%, transparent);
}

.hui-upload__hint {
  margin: 0;
  color: var(--hui-color-muted);
  font-size: 0.8rem;
}

.hui-upload__files {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: min(100%, 420px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hui-upload__files:empty {
  display: none;
}

.hui-upload__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--hui-color-border);
  border-radius: var(--hui-radius-control);
  font-size: 0.875rem;
}

.hui-upload__file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hui-upload__file-size {
  flex: none;
  margin-left: auto;
  color: var(--hui-color-muted);
  font-size: 0.8rem;
}

.hui-upload__file--error {
  border-color: var(--hui-color-danger);
}

.hui-upload__file--error .hui-upload__file-size {
  flex: 1 1 100%;
  margin-left: 0;
  color: var(--hui-color-danger);
}

.hui-upload__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hui-color-muted);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
}

.hui-upload__remove:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
}

.hui-upload__remove:focus-visible {
  outline: 2px solid var(--hui-color-accent);
  outline-offset: 1px;
}

.hui-field--invalid .hui-input,
.hui-field--invalid .hui-choices,
.hui-field--invalid .hui-scale,
.hui-field--invalid .hui-rating {
  --hui-color-border: var(--hui-color-danger);
}

.hui-ranking__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hui-ranking__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--hui-color-border);
  border-radius: var(--hui-radius-control);
}

.hui-ranking__label { flex: 1; }
.hui-ranking__controls { display: none; gap: 0.25rem; }
[data-hui-ranking-enhanced] .hui-ranking__controls { display: inline-flex; }
[data-hui-ranking-enhanced] .hui-ranking__fallback { display: none; }

.hui-matrix-wrap { overflow-x: auto; }
.hui-matrix { width: 100%; border-collapse: collapse; }
.hui-matrix th, .hui-matrix td { padding: 0.55rem; border: 1px solid var(--hui-color-border); text-align: center; }
.hui-matrix th[scope="row"] { text-align: left; }

.hui-field--invalid .hui-upload__dropzone {
  border-color: var(--hui-color-danger);
}

.hui-field__errors {
  margin: 0;
  padding: 0;
  color: var(--hui-color-danger);
  font-size: 0.875rem;
  list-style: none;
}

fieldset.hui-field {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hui-form__progress {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.hui-form__page-count {
  color: var(--hui-color-muted);
  font-size: 0.875rem;
}

.hui-form__captcha {
  margin-top: 1.25rem;
}

.hui-form__nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.hui-form__nav .hui-form__button--next,
.hui-form__nav .hui-form__button--submit {
  margin-left: auto;
}

.hui-form__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 38px;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--hui-color-accent);
  border-radius: var(--hui-radius-control);
  background: var(--hui-color-accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
}

.hui-form__nav-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.hui-form__button--back {
  border-color: var(--hui-color-border);
  background: transparent;
  color: inherit;
}

.hui-form__button:focus-visible {
  outline: 2px solid var(--hui-color-accent);
  outline-offset: 2px;
}

.hui-form__button:hover {
  filter: brightness(0.94);
}

.hui-form__button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.hui-form__notice,
.hui-form__error-banner {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hui-color-border);
  border-radius: var(--hui-radius-control);
}

.hui-form__notice {
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}

.hui-form__error-banner {
  border-color: var(--hui-color-danger);
  background: color-mix(in srgb, var(--hui-color-danger) 8%, transparent);
}

.hui-ending {
  padding-block: 0.5rem;
}

/* Post-back scroll targets (fill.js scrolls the first errored field, the ending or the form into
   view). Sites with a sticky header set --scroll-margin-top, for example on :root, to its height.
   Deliberately unprefixed and never declared here, so a site-wide value is inherited. */
.hui-form,
.hui-field,
.hui-ending {
  scroll-margin-top: var(--scroll-margin-top, 1rem);
}

/* fill.js focuses these containers only to move keyboard focus after a postback; they are not
   controls, so they get no focus ring. */
.hui-form[tabindex="-1"]:focus,
.hui-field[tabindex="-1"]:focus,
.hui-ending[tabindex="-1"]:focus {
  outline: none;
}

.hui-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .hui-grid {
    grid-template-columns: 1fr !important;
  }

  .hui-matrix, .hui-matrix tbody, .hui-matrix tr, .hui-matrix th, .hui-matrix td { display: block; }
  .hui-matrix thead { display: none; }
  .hui-matrix tr { margin-bottom: 0.75rem; border: 1px solid var(--hui-color-border); }
  .hui-matrix th, .hui-matrix td { border: 0; }
  .hui-matrix td[data-hui-matrix-column]::before { content: attr(data-hui-matrix-column); margin-right: 0.5rem; }
}

/* Lookup typeahead combobox (progressive enhancement over exact-value fallback). */
.hui-lookup {
  position: relative;
}

.hui-lookup__enhanced {
  position: relative;
}

.hui-lookup__listbox {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  max-height: 14rem;
  overflow: auto;
  border: 1px solid var(--hui-color-border);
  border-radius: var(--hui-radius-control);
  background: #fff;
  color: #111;
  box-shadow: 0 8px 24px color-mix(in srgb, #000 12%, transparent);
}

.hui-lookup__option {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.hui-lookup__option--active,
.hui-lookup__option:hover {
  background: color-mix(in srgb, var(--hui-color-accent) 12%, transparent);
}

.hui-lookup__label:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}