/* Make Interfaces form-controls v0.1.0.
   Load after project styles. Native single-select and checkbox; no JavaScript. */
.mi-select-field, select.mi-select, .mi-checkbox {
  --_mi-field-surface: var(--mi-field-surface, var(--mi-surface, oklch(0.99 0.004 90)));
  --_mi-field-text: var(--mi-field-text, var(--mi-text, oklch(0.24 0.015 250)));
  --_mi-field-border: var(--mi-field-border, var(--mi-border, oklch(0.4 0.015 250 / 0.3)));
  --_mi-field-accent: var(--mi-field-accent, var(--mi-accent, oklch(0.4 0.07 250)));
  --_mi-field-radius: var(--mi-field-radius, 0.625rem);
  --_mi-field-error: var(--mi-field-error, oklch(0.54 0.2 25));
  --_mi-field-hover: color-mix(in oklch, var(--_mi-field-text) 7%, var(--_mi-field-surface));
  --_mi-field-selected: color-mix(in oklch, var(--_mi-field-accent) 14%, var(--_mi-field-surface));
  box-sizing: border-box;
}
.mi-select-field {
  position: relative;
  display: block;
  min-inline-size: 0;
  inline-size: 100%;
  color: var(--_mi-field-text);
}
select.mi-select {
  appearance: none;
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: max(44px, 2.875rem);
  margin: 0;
  padding-block: 0.675rem;
  padding-inline: 0.875rem 2.75rem;
  border: 1px solid var(--_mi-field-border);
  border-radius: var(--_mi-field-radius);
  background: var(--_mi-field-surface);
  color: var(--_mi-field-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.mi-select-chevron {
  position: absolute;
  inset-inline-end: 0.875rem;
  inset-block-start: 50%;
  inline-size: 1rem;
  block-size: 1rem;
  translate: 0 -50%;
  color: var(--mi-muted, var(--_mi-field-text));
  pointer-events: none;
  transition: rotate 150ms ease-out;
}
select.mi-select:focus-visible {
  outline: 2px solid var(--_mi-field-accent);
  outline-offset: 2px;
  border-color: var(--_mi-field-accent);
}
select.mi-select:is(:user-invalid, [aria-invalid="true"]) { border-color: var(--_mi-field-error); }
select.mi-select:disabled { opacity: 0.55; cursor: not-allowed; }
select.mi-select:disabled + .mi-select-chevron { opacity: 0.55; }
@media (hover: hover) {
  select.mi-select:hover:not(:disabled) { background-color: var(--_mi-field-hover); }
}

/* The browser keeps positioning, keyboard navigation, selection and validation. */
@supports (appearance: base-select) and selector(select::picker(select)) {
  select.mi-select, select.mi-select::picker(select) { appearance: base-select; }
  select.mi-select { display: block; }
  select.mi-select > button {
    appearance: none;
    display: flex;
    min-inline-size: 0;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: inherit;
  }
  select.mi-select > button > selectedcontent {
    display: block;
    min-inline-size: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  select.mi-select::picker-icon { display: none; }
  select.mi-select:open + .mi-select-chevron { rotate: 180deg; }
  select.mi-select::picker(select) {
    box-sizing: border-box;
    max-inline-size: calc(100vw - 1.5rem);
    max-block-size: min(20rem, 50dvh);
    margin-block: 0.25rem;
    padding: 0.375rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--_mi-field-border);
    border-radius: var(--_mi-field-radius);
    background: var(--_mi-field-surface);
    color: var(--_mi-field-text);
    box-shadow: 0 0.5rem 1.5rem oklch(0 0 0 / 0.16);
    font: inherit;
    opacity: 0;
    transition: opacity 120ms ease-out, display 120ms allow-discrete, overlay 120ms allow-discrete;
  }
  select.mi-select:open::picker(select) { opacity: 1; }
  @starting-style {
    select.mi-select:open::picker(select) { opacity: 0; }
  }
  select.mi-select option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: max(44px, 2.75rem);
    padding: 0.625rem 0.75rem;
    border-radius: max(0.25rem, calc(var(--_mi-field-radius) - 0.375rem));
    background: transparent;
    color: var(--_mi-field-text);
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  select.mi-select option:checked { background: var(--_mi-field-selected); }
  select.mi-select option:focus-visible {
    outline: 2px solid var(--_mi-field-accent);
    outline-offset: -2px;
    background: var(--_mi-field-hover);
  }
  select.mi-select option:disabled { opacity: 0.5; }
  select.mi-select option::checkmark { color: var(--_mi-field-accent); }
  @media (hover: hover) {
    select.mi-select option:hover:not(:disabled) { background: var(--_mi-field-hover); }
  }
  @media (prefers-reduced-motion: reduce) {
    select.mi-select::picker(select) { transition: none; }
  }
}

label.mi-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-block-size: max(44px, 2.75rem);
  min-inline-size: 0;
  padding-block: 0.625rem;
  color: var(--_mi-field-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
/* The native input remains in the tab order and owns checked/required/form state. */
.mi-checkbox > input.mi-checkbox__input {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.625rem;
  inline-size: 1px;
  min-inline-size: 0;
  max-inline-size: 1px;
  block-size: 1px;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}
.mi-checkbox__box {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-block-start: 0.0625rem;
  border: 1px solid var(--_mi-field-border);
  border-radius: 0.375rem;
  background: var(--_mi-field-surface);
  color: var(--mi-check-mark, var(--mi-on-accent, oklch(1 0 0)));
  transition: scale 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}
.mi-checkbox__box svg { inline-size: 1rem; block-size: 1rem; overflow: visible; }
.mi-checkbox__tick {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 150ms ease-out, opacity 150ms ease-out;
}
.mi-checkbox__text { min-inline-size: 0; overflow-wrap: anywhere; }
.mi-checkbox__input:checked + .mi-checkbox__box {
  border-color: var(--mi-check-surface, var(--_mi-field-accent));
  background: var(--mi-check-surface, var(--_mi-field-accent));
}
.mi-checkbox__input:checked + .mi-checkbox__box .mi-checkbox__tick {
  stroke-dashoffset: 0;
  opacity: 1;
  transition-duration: 280ms, 120ms;
}
.mi-checkbox__input:focus-visible + .mi-checkbox__box {
  outline: 2px solid var(--_mi-field-accent);
  outline-offset: 3px;
}
.mi-checkbox__input:is(:user-invalid, [aria-invalid="true"]) + .mi-checkbox__box { border-color: var(--_mi-field-error); }
.mi-checkbox__input:disabled ~ :is(.mi-checkbox__box, .mi-checkbox__text) { opacity: 0.55; }
.mi-checkbox:has(> .mi-checkbox__input:disabled) { cursor: not-allowed; }
@media (hover: hover) {
  .mi-checkbox:hover > .mi-checkbox__input:not(:disabled) + .mi-checkbox__box { scale: 1.05; }
}
.mi-checkbox:active > .mi-checkbox__input:not(:disabled) + .mi-checkbox__box,
.mi-checkbox__input:active:not(:disabled) + .mi-checkbox__box { scale: 0.96; }

@media (prefers-reduced-motion: reduce) {
  select.mi-select, .mi-select-chevron { transition: none; }
  .mi-checkbox__box, .mi-checkbox__tick { transition: none !important; }
  .mi-checkbox .mi-checkbox__box { scale: 1 !important; }
}
@media (forced-colors: active) {
  .mi-checkbox__box { forced-color-adjust: none; border-color: ButtonText; background: Canvas; }
  .mi-checkbox__input:checked + .mi-checkbox__box { border-color: Highlight; background: Highlight; color: HighlightText; }
  .mi-checkbox__input:disabled + .mi-checkbox__box { border-color: GrayText; }
}