/* core/css/forms/fields.css — Shared field styles
   Classes: phx- + BEM — .phx-<field>__<part>--<modifier>
   Used by: core/templates/phoxtail_core/forms/fields/ */

/* ── Field Wrapper ── */

.phx-field {
    display: block;
}

/* ── Required Marker ── */

.phx-field__required {
    color: rgb(var(--color-destructive-500));
}

/* ── Choice Input (MD3 checkbox / radio) ──
   Checkbox: 18dp container, 2dp corner radius, 2dp outline border; checked
   fills with primary and shows an on-primary checkmark. Radio: 20dp ring;
   selected shows a primary ring with a primary inner dot (radial gradient —
   ::before/::after are reserved/reset for third-party interop below). */

.phx-choice__input {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex-shrink: 0;
    border: 2px solid rgb(var(--md-sys-color-on-surface-variant)) !important;
    background-color: transparent !important;
    cursor: pointer;
    outline: none;
    transition: background-color 150ms var(--md-sys-motion-easing-standard),
                border-color 150ms var(--md-sys-motion-easing-standard);
}

.phx-choice__input::before,
.phx-choice__input::after {
    display: none !important;
    content: none !important;
}

.phx-choice__input--checkbox {
    width: 1.125rem !important;
    height: 1.125rem !important;
    border-radius: 2px !important;
}

.phx-choice__input--radio {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 50% !important;
}

.phx-choice__input--checkbox:checked {
    background-color: rgb(var(--md-sys-color-primary)) !important;
    border-color: rgb(var(--md-sys-color-primary)) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 0.75rem !important;
}

/* Selected radio: primary ring + centered primary dot (10dp of the 20dp). */
.phx-choice__input--radio:checked {
    border-color: rgb(var(--md-sys-color-primary)) !important;
    background: radial-gradient(circle,
        rgb(var(--md-sys-color-primary)) 0 31%,
        transparent 34%) !important;
}

.phx-choice__input:focus-visible {
    outline: 2px solid rgb(var(--md-sys-color-primary));
    outline-offset: 2px;
}

.phx-choice__input:disabled {
    border-color: rgb(var(--md-sys-color-on-surface) / 0.38) !important;
    cursor: default;
}

/* ── Choice Option Label (shared by single checkbox, multi-checkbox, radio) ──
   Plain MD3 list rows — the control and a body-large label, state layer on
   hover, no pill/glass container. */

.phx-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    cursor: pointer;
    min-width: 0;
    transition: background-color 150ms var(--md-sys-motion-easing-standard);
}

.phx-choice:hover {
    background-color: rgb(var(--md-sys-color-on-surface) / 0.08);
}

/* Larger padding for standalone single-checkbox */
.phx-checkbox {
    padding: 0.75rem;
}

/* In single-checkbox context, the text container fills remaining space */
.phx-checkbox .phx-choice__text {
    flex: 1;
}

.phx-choice__text {
    font-size: 1rem;
    color: rgb(var(--md-sys-color-on-surface));
}

/* Tighter rows inside grids so narrow cells (e.g. the 7-column weekday
   picker) don't clip their labels. */
.phx-choices .phx-choice {
    padding: 0.375rem 0.375rem;
    gap: 0.5rem;
}

/* Truncate text when inside a grid (multi-choice context) */
.phx-choices .phx-choice__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phx-choice__name {
    display: block;
    font-size: 1rem;
    color: rgb(var(--md-sys-color-on-surface));
}

.phx-choice__help {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--md-sys-color-on-surface-variant));
}

/* ── Choice Grid ── */

/* Column count adapts to the grid's own rendered width, not the viewport —
   this widget gets mounted in containers of wildly different widths (a full
   page, a narrow modal drawer, a sidebar panel) that have no relation to the
   viewport size a fixed media-query breakpoint would key off of. Falls back
   to viewport-based breakpoints for browsers without container query
   support (behavior identical to the previous implementation).
   Containment lives on the .phx-field wrapper, not the grid itself — a
   container query can't size an element against a containment context the
   element itself establishes, it only sees ancestor containers. */
.phx-field:has(.phx-choices) {
    container-type: inline-size;
}

.phx-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@container (min-width: 400px) {
    .phx-choices {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 640px) {
    .phx-choices {
        grid-template-columns: repeat(3, 1fr);
    }
}

@supports not (container-type: inline-size) {
    @media (min-width: 640px) {
        .phx-choices {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .phx-choices {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

/* A grouped choice's heading spans the whole row above its options. */
.phx-choices > .phx-field__group-label {
    grid-column: 1 / -1;
}

/* 7-column layout for weekday selection (Mon–Sun). Four columns until the
   grid itself — not the screen — is wide enough for seven short day names
   (a wide screen with a narrow drawer used to force seven cells too small
   for their labels); seven need ~27rem at the spacing below. */
.phx-choices--7col {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@container (min-width: 28rem) {
    .phx-choices--7col {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
    }
}

@supports not (container-type: inline-size) {
    @media (min-width: 1024px) {
        .phx-choices--7col {
            grid-template-columns: repeat(7, 1fr);
        }
    }
}

/* ── Password ──
   The password box is the shared phx-field outlined field (input.html); its
   show/hide button is a .phx-field__trailing-button driven by js/fields.js. */

.phx-input__password-eye {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

.phx-input__password-eye svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ── Hidden Utility ── */

.phx-hidden {
    display: none;
}

/* Visually hidden but still focusable/participates in layout flow enough for
   native constraint validation — unlike display:none, this lets a `required`
   select still be validated and (if invalid) focused by the browser on
   submit instead of throwing "not focusable" and silently blocking it. */
.phx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Widget Container (complex HTMX widgets) ── */

.phx-single-select-search__container {
    position: relative;
}

.phx-single-select-search__container--inactive {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
    transition: opacity 300ms;
}

/* ── Toggle (MD3 switch) ──
   52x32dp track. Unselected: surface-container-highest fill, 2dp outline
   border, 16dp on-surface-variant handle. Selected: primary fill, handle
   grows to 24dp in on-primary and slides right. A list row like the
   checkbox's: padded, highlighted on hover, no pill. */

.phx-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
    cursor: pointer;
    transition: background-color 150ms var(--md-sys-motion-easing-standard);
}

/* The whole row answers the pointer, as the checkbox row does. */
.phx-toggle:hover {
    background-color: rgb(var(--md-sys-color-on-surface) / 0.08);
}

.phx-toggle__name {
    font-size: 1rem;
    color: rgb(var(--md-sys-color-on-surface));
}

.phx-toggle__wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.phx-toggle__input {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    appearance: none !important;
}

.phx-toggle__track {
    position: relative;
    width: 3.25rem;
    height: 2rem;
    box-sizing: border-box;
    border-radius: 9999px;
    border: 2px solid rgb(var(--md-sys-color-outline));
    background-color: rgb(var(--md-sys-color-surface-container-highest));
    transition: background-color 200ms var(--md-sys-motion-easing-standard),
                border-color 200ms var(--md-sys-motion-easing-standard);
}

.phx-toggle__track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.375rem;
    width: 1rem;
    height: 1rem;
    background-color: rgb(var(--md-sys-color-on-surface-variant));
    border-radius: 9999px;
    transform: translateY(-50%);
    transition: transform 200ms var(--md-sys-motion-easing-standard),
                width 200ms var(--md-sys-motion-easing-standard),
                height 200ms var(--md-sys-motion-easing-standard),
                background-color 200ms var(--md-sys-motion-easing-standard);
}

.phx-toggle__input:checked + .phx-toggle__track {
    background-color: rgb(var(--md-sys-color-primary));
    border-color: rgb(var(--md-sys-color-primary));
}

/* 24dp handle, 4dp from the track's right inner edge. */
.phx-toggle__input:checked + .phx-toggle__track::before {
    width: 1.5rem;
    height: 1.5rem;
    background-color: rgb(var(--md-sys-color-on-primary));
    transform: translate(0.875rem, -50%);
}

.phx-toggle__input:focus-visible + .phx-toggle__track {
    outline: 2px solid rgb(var(--md-sys-color-primary));
    outline-offset: 2px;
}

/* ── Search ──
   filled + small: one pill for a list's toolbar — the magnifier (or the
   clear button once there is text), the box and the result count sit inside
   it. 2.25rem, as the buttons beside it. */

.phx-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    box-sizing: border-box;
}

.phx-search--small {
    height: 2.25rem;
    padding: 0 1rem;
}

.phx-search--filled {
    background: rgb(var(--color-surface-100));
    border-radius: 999px;
    transition: background-color 150ms ease;
}

/* The box drops its own outline, so focus is a step up in surface. */
.phx-search--filled:focus-within {
    background: rgb(var(--color-surface-200));
}

/* !important: Wagtail's admin styles every input. */
.phx-search__input {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    /* Right padding reserves room for the absolutely positioned count. */
    padding: 0 3.25rem 0 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgb(var(--color-surface-900)) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    outline: none !important;
    box-shadow: none !important;
}

.phx-search__input::placeholder {
    color: rgb(var(--color-surface-600));
}

/* The magnifier and the clear button share one slot — one is visible. */
.phx-search__icon,
.phx-search__clear {
    display: flex;
    flex-shrink: 0;
}

.phx-search__icon.phx-hidden,
.phx-search__clear.phx-hidden {
    display: none;
}

.phx-search__icon {
    pointer-events: none;
}

.phx-search__clear {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.phx-search__icon svg,
.phx-search__clear svg {
    width: 16px;
    height: 16px;
    display: block;
    color: rgb(var(--color-surface-600));
}

.phx-search__count {
    position: absolute;
    right: 1rem;
    color: rgb(var(--color-surface-600));
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
}

/* Dark: an overlay darkens whatever the pill sits on (a page, a drawer), so
   it reads as a well on every ground. */
@media (prefers-color-scheme: dark) {
    .phx-search--filled {
        background: rgb(0 0 0 / 0.2);
    }

    .phx-search--filled:focus-within {
        background: rgb(0 0 0 / 0.28);
    }

    .phx-search__input {
        color: rgb(var(--color-surface-50)) !important;
    }

    .phx-search__input::placeholder {
        color: rgb(var(--color-surface-300));
    }

    .phx-search__icon svg,
    .phx-search__clear svg,
    .phx-search__count {
        color: rgb(var(--color-surface-300));
    }
}

/* ── Date Stepper ──
   filled + small: ‹ date › for a toolbar — one pill in three segments, a
   faint line between them. The outer radius is half the height, not 999px:
   an oversized radius makes the browser shrink every corner of the box. */

.phx-date-stepper {
    display: inline-flex;
}

.phx-date-stepper > * {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.phx-date-stepper--small > * {
    height: 2.25rem;
}

.phx-date-stepper > :first-child {
    border-start-start-radius: 1.125rem;
    border-end-start-radius: 1.125rem;
}

.phx-date-stepper > :last-child {
    border-start-end-radius: 1.125rem;
    border-end-end-radius: 1.125rem;
}

/* The fill comes from the ground the pill sits on: a page or drawer whose
   own colour needs another sets --phx-control-fill and --phx-control-fill-hover. */
.phx-date-stepper--filled > * {
    background: var(--phx-control-fill, rgb(var(--color-surface-100)));
    color: rgb(var(--color-surface-600));
    cursor: pointer;
    transition: background-color 150ms ease;
}

.phx-date-stepper--filled > :hover {
    background: var(--phx-control-fill-hover, rgb(var(--color-surface-200)));
}

/* The focused segment is lifted, or its neighbour paints over its ring. */
.phx-date-stepper > :focus-visible {
    position: relative;
    z-index: 1;
}

.phx-date-stepper__step {
    justify-content: center;
    width: 2.25rem;
    padding: 0;
    border: none;
}

/* The line between segments darkens (lightens, in dark) whatever fill it
   crosses, so it shows on every ground. */
.phx-date-stepper--filled > :first-child {
    border-inline-end: 1px solid rgb(0 0 0 / 0.08);
}

.phx-date-stepper--filled > :last-child {
    border-inline-start: 1px solid rgb(0 0 0 / 0.08);
}

.phx-date-stepper__step svg {
    width: 1.125rem;
    height: 1.125rem;
}

.phx-date-stepper__date {
    flex: 1;
    gap: 0.5rem;
    padding-inline-end: 1rem;
}

/* Sheds Wagtail's input[type=date] styling (!important: Wagtail's admin
   styles every input) and lets clicks through to the date, which opens the
   picker from anywhere on it rather than editing day, month and year one by
   one. The box spans the date from its start edge, where the picker anchors,
   and pads its text back in. */
.phx-date-stepper__input {
    pointer-events: none;
    appearance: none;
    align-self: stretch;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 0 0 1rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    color: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color-scheme: light dark;
    /* Outranks Wagtail's global :focus-visible ring: the ring moves to the
       whole date, where Firefox's clip (below) cannot cut it. */
    outline: none !important;
    box-shadow: none !important;
}

.phx-date-stepper__date:focus-within {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--w-color-focus, currentColor);
    outline-offset: 2px;
}

/* With text, the box stays in place, unseen, for the picker to anchor to; it
   shows, over the text, while the keyboard is in it. The text and its icon
   sit centred. */
.phx-date-stepper__date--text {
    position: relative;
    justify-content: center;
    padding-inline-start: 1rem;
}

/* A week's text changes width as it steps ("Feb 2 – 8, 2026", "28. Dez.
   2026 – 3. Jan. 2027"), which would move the arrows under the pointer; its
   pill keeps room for the longest. A day's text keeps one width. */
.phx-date-stepper--week .phx-date-stepper__date {
    min-width: 15rem;
}

.phx-date-stepper__date--text .phx-date-stepper__input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.phx-date-stepper__date--text .phx-date-stepper__input:focus {
    opacity: 1;
}

.phx-date-stepper__date--text:focus-within .phx-date-stepper__text {
    visibility: hidden;
}

/* Text as the buttons beside it; trimmed to its letters, which a font's box
   otherwise sets high (it leaves room below for descenders). */
.phx-date-stepper__text {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

/* As the icons in the buttons beside it. */
.phx-date-stepper__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.phx-date-stepper__input::-webkit-calendar-picker-indicator {
    display: none;
}

/* Firefox has no pseudo-element for its icon: clip the strip it paints and
   pull the glyph over it. */
@supports (-moz-appearance: none) {
    .phx-date-stepper__input {
        clip-path: inset(0 1.5rem 0 0);
        margin-inline-end: -1.5rem;
    }
}

/* Dark: an overlay darkens whatever the pill sits on, as the search bar's. */
@media (prefers-color-scheme: dark) {
    .phx-date-stepper--filled > * {
        background: var(--phx-control-fill, rgb(0 0 0 / 0.2));
        color: rgb(var(--color-surface-300));
    }

    .phx-date-stepper--filled > :hover {
        background: var(--phx-control-fill-hover, rgb(0 0 0 / 0.28));
    }

    .phx-date-stepper--filled > :first-child,
    .phx-date-stepper--filled > :last-child {
        border-color: rgb(255 255 255 / 0.08);
    }
}

/* ── Search Results (single select search) ── */

.phx-single-select-search__divider {
    margin: 0;
    border-top: 1px solid rgb(var(--md-sys-color-outline-variant));
}

.phx-single-select-search__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.9375rem;
    color: rgb(var(--md-sys-color-on-surface));
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}

.phx-single-select-search__item:hover {
    background: rgb(var(--md-sys-color-on-surface) / 0.06);
}

.phx-single-select-search__item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phx-single-select-search__empty {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: rgb(var(--md-sys-color-on-surface-variant));
    font-style: italic;
    text-align: center;
}

/* ── Single Select Search ── */

.phx-single-select-search__input {
    position: relative;
    /* token definitions — light; cascade to trigger, panel, results */
    --md-sys-color-surface-container-low: var(--color-surface-100);
    --md-sys-color-outline-variant: var(--color-surface-200);
    --md-sys-color-on-surface: var(--color-surface-900);
    --md-sys-color-on-surface-variant: var(--color-surface-600);
    --md-sys-color-primary: var(--color-primary-600);
    --phx-single-select-search-panel-background: var(--color-surface-100);
}

@media (prefers-color-scheme: dark) {
    .phx-single-select-search__input {
        --md-sys-color-surface-container-low: var(--color-surface-800);
        --md-sys-color-outline-variant: var(--color-surface-700);
        --md-sys-color-on-surface: var(--color-surface-100);
        --md-sys-color-on-surface-variant: var(--color-surface-400);
        --md-sys-color-primary: var(--color-primary-400);
        --phx-single-select-search-panel-background: var(--color-surface-950, 8 8 8);
    }
}

/* Trigger — a bare flex row; all field chrome (background, outline, focus
   and open states) comes from the shared .phx-field__control / .phx-field__outline
   anatomy, never from the trigger itself. */
.phx-single-select-search__trigger {
    white-space: nowrap;
    outline: none !important;
}

.phx-single-select-search__trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.phx-single-select-search__trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* Chevron icon — rotates when panel is open */
.phx-single-select-search__chevron {
    width: 1rem !important;
    height: 1rem !important;
    color: rgb(var(--md-sys-color-on-surface-variant));
    flex-shrink: 0 !important;
    transition: transform 0.2s ease;
    display: block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.phx-single-select-search__trigger[aria-expanded="true"] .phx-single-select-search__chevron {
    transform: rotate(180deg);
}

/* Clear button (replaces chevron when an item is selected) */
.phx-single-select-search__trigger-clear {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    color: inherit;
    transition: color 0.15s;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 0;
}

.phx-single-select-search__trigger-clear svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.phx-single-select-search__trigger-clear:hover {
    color: rgb(var(--md-sys-color-on-surface)) !important;
    background: none !important;
}

/* Panel (the dropdown) */
.phx-single-select-search__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 100;
    min-width: 14rem;
    max-width: 22rem;
    background: rgb(var(--phx-single-select-search-panel-background));
    border: 1px solid rgb(var(--md-sys-color-outline-variant));
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
    overflow: hidden;
}

/* Search bar inside panel */
.phx-single-select-search__panel-search {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.875rem;
    border-bottom: 1px solid rgb(var(--md-sys-color-outline-variant));
}

.phx-single-select-search__panel-search-icon {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0;
    color: rgb(var(--md-sys-color-on-surface-variant));
    display: block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.phx-single-select-search__panel-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    color: rgb(var(--md-sys-color-on-surface)) !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
}

.phx-single-select-search__panel-input::placeholder {
    color: rgb(var(--md-sys-color-on-surface-variant));
}

.phx-single-select-search__panel-input:hover,
.phx-single-select-search__panel-input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Items list */
.phx-single-select-search__results {
    padding: 0.375rem 0;
    max-height: 14rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--md-sys-color-outline-variant)) transparent;
}

/* ── Segmented Control ──
   Keeps the original sliding-thumb design (a deliberate departure from MD3
   segmented buttons, by design decision) but dressed as an outlined field:
   same 56px height, same outline token/hover/error border treatment and 4px
   corners as .phx-field__outline, transparent track. The thumb is glassy — a
   low-alpha primary tint over a backdrop blur with a primary hairline —
   and the selected label carries the primary accent. That is the outlined
   + large look, for forms; --filled --small is a pill (below). */

.phx-segmented-control {
    position: relative !important;
    display: inline-flex !important;
    height: 3.5rem !important;
    width: auto !important;
    flex-shrink: 0 !important;
    border-radius: var(--md-sys-shape-corner-extra-small, 4px) !important;
    border: 1px solid rgb(var(--md-sys-color-outline)) !important;
    background: transparent !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    user-select: none !important;
    transition: border-color 200ms var(--md-sys-motion-easing-standard);
}

/* Hover/error borders mirror .phx-field__outline so the control never stands out
   from the outlined fields sharing its row. */
.phx-segmented-control:hover {
    border-color: rgb(var(--md-sys-color-on-surface)) !important;
}

.phx-field--error .phx-segmented-control,
.phx-field--error .phx-segmented-control:hover {
    border-color: rgb(var(--md-sys-color-error)) !important;
}

.phx-segmented-control__radio {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.phx-segmented-control__track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.phx-segmented-control__slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 50% !important;
    height: 100% !important;
    /* Container radius minus its 4px padding would be negative; a hair of
       rounding keeps the thumb from looking sharper than the outline. */
    border-radius: calc(var(--md-sys-shape-corner-extra-small, 4px) - 2px) !important;
    /* Glass thumb: a whisper of primary over a backdrop blur, edged with a
       primary hairline. Safe over any surface — including glass panels —
       because nothing here is opaque. */
    background: rgb(var(--md-sys-color-primary) / 0.08) !important;
    border: 1px solid rgb(var(--md-sys-color-primary) / 0.25) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
    backdrop-filter: blur(8px) saturate(1.3) !important;
    box-shadow: none !important;
    transition: transform 0.2s var(--md-sys-motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)) !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

.phx-segmented-control__label {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: rgb(var(--md-sys-color-on-surface-variant)) !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: color 0.15s ease !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    line-height: normal !important;
}

/* One segment per choice: labels share the width, the thumb is one share
   wide and slides to the checked radio (up to five segments). */
.phx-segmented-control .phx-segmented-control__label {
    padding: 0 16px !important;
    white-space: nowrap !important;
}

.phx-segmented-control__slider {
    width: calc(100% / var(--phx-segmented-control-count, 2)) !important;
}

/* Neutral thumb; the selection is voiced by the primary label. */
.phx-segmented-control__radio:checked + .phx-segmented-control__label {
    color: rgb(var(--md-sys-color-primary)) !important;
}

.phx-segmented-control__track:has(.phx-segmented-control__radio:nth-of-type(1):checked) .phx-segmented-control__slider {
    transform: translateX(0) !important;
}

.phx-segmented-control__track:has(.phx-segmented-control__radio:nth-of-type(2):checked) .phx-segmented-control__slider {
    transform: translateX(100%) !important;
}

.phx-segmented-control__track:has(.phx-segmented-control__radio:nth-of-type(3):checked) .phx-segmented-control__slider {
    transform: translateX(200%) !important;
}

.phx-segmented-control__track:has(.phx-segmented-control__radio:nth-of-type(4):checked) .phx-segmented-control__slider {
    transform: translateX(300%) !important;
}

.phx-segmented-control__track:has(.phx-segmented-control__radio:nth-of-type(5):checked) .phx-segmented-control__slider {
    transform: translateX(400%) !important;
}

/* filled + small: a pill for toolbars and page headers — a grey track with
   a raised white thumb (the outlined + large default is for forms). */
.phx-segmented-control--filled {
    border-radius: 9999px !important;
    border-color: rgb(var(--color-surface-300)) !important;
    background: rgb(var(--color-surface-200)) !important;
    padding: 3px !important;
}

.phx-segmented-control--filled:hover {
    border-color: rgb(var(--color-surface-300)) !important;
}

.phx-segmented-control--small {
    height: 2.25rem !important;
}

.phx-segmented-control--filled .phx-segmented-control__slider {
    border-radius: 9999px !important;
    background: rgb(var(--color-surface-50)) !important;
    border: 1px solid rgb(0 0 0 / 0.05) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04) !important;
}

.phx-segmented-control--filled .phx-segmented-control__label {
    font-size: 0.8125rem !important;
    color: rgb(var(--color-surface-500)) !important;
}

.phx-segmented-control--filled .phx-segmented-control__radio:checked + .phx-segmented-control__label {
    color: rgb(var(--color-surface-900)) !important;
}

@media (prefers-color-scheme: dark) {
    .phx-segmented-control--filled,
    .phx-segmented-control--filled:hover {
        border-color: rgb(var(--color-surface-800)) !important;
        background: rgb(var(--color-surface-900)) !important;
    }

    .phx-segmented-control--filled .phx-segmented-control__slider {
        background: rgb(var(--color-surface-800)) !important;
        border-color: rgb(255 255 255 / 0.08) !important;
        box-shadow: 0 1px 3px rgb(0 0 0 / 0.2), 0 1px 2px rgb(0 0 0 / 0.1) !important;
    }

    .phx-segmented-control--filled .phx-segmented-control__label {
        color: rgb(var(--color-surface-400)) !important;
    }

    .phx-segmented-control--filled .phx-segmented-control__radio:checked + .phx-segmented-control__label {
        color: rgb(var(--color-surface-50)) !important;
    }
}

/* A disabled field disables every segment, so it takes the MD3 disabled
   look: faded labels and outline. */
.phx-segmented-control--locked .phx-segmented-control__label {
    opacity: 0.38 !important;
    cursor: default !important;
}

.phx-segmented-control--locked,
.phx-segmented-control--locked:hover {
    border-color: rgb(var(--md-sys-color-on-surface) / 0.12) !important;
}

/* ── MD3 Outlined Field (pilot: select widget) ──
   Tokens are scoped to .phx-field for now, mirroring the
   .phx-single-select-search__input pattern; hoist to :root once the remaining widgets migrate.
   The outline is a fieldset/legend so the label notch is a real border gap —
   no background patch behind the label, safe over glass surfaces. */

.phx-field {
    --md-sys-color-primary: var(--color-primary-600);
    --md-sys-color-on-primary: 255 255 255;
    --md-sys-color-error: var(--color-destructive-600);
    --md-sys-color-on-surface: var(--color-surface-900);
    --md-sys-color-on-surface-variant: var(--color-surface-600);
    --md-sys-color-outline: var(--color-surface-400);
    /* Approximations of the secondary-container pair from the phoxtail
       palette (no dedicated secondary hue exists yet). */
    --md-sys-color-secondary-container: var(--color-primary-100);
    --md-sys-color-on-secondary-container: var(--color-primary-900);
    --md-sys-color-surface-container-highest: var(--color-surface-200);
    --md-sys-color-surface-container-low: var(--color-surface-100);
    --md-sys-color-outline-variant: var(--color-surface-200);
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-shape-corner-extra-small: 4px;
}

@media (prefers-color-scheme: dark) {
    .phx-field {
        --md-sys-color-primary: var(--color-primary-400);
        --md-sys-color-on-primary: var(--color-primary-950, 0 0 0);
        --md-sys-color-error: var(--color-destructive-400);
        --md-sys-color-on-surface: var(--color-surface-100);
        --md-sys-color-on-surface-variant: var(--color-surface-400);
        --md-sys-color-outline: var(--color-surface-600);
        --md-sys-color-secondary-container: var(--color-primary-900);
        --md-sys-color-on-secondary-container: var(--color-primary-100);
        --md-sys-color-surface-container-highest: var(--color-surface-700);
        --md-sys-color-surface-container-low: var(--color-surface-800);
        --md-sys-color-outline-variant: var(--color-surface-700);
    }
}

.phx-field__box {
    position: relative;
    display: flex;
    align-items: center;
    /* MD3 default field height is 56dp; drop to 40px if a -2 density is
       preferred for dense forms. */
    height: 56px;
}

/* Structural props carry !important as armor against host-app admin CSS
   (Wagtail restyles input/select/textarea/label/legend/fieldset globally,
   sometimes with attribute selectors that out-rank a single class). State
   rules (focus, error, disabled) target the sibling outline/label, so they
   are unaffected by these. */
.phx-field__control {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 1rem !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    line-height: normal;
    color: rgb(var(--md-sys-color-on-surface)) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
    box-sizing: border-box !important;
}

select.phx-field__control {
    cursor: pointer;
}

/* MD3 fields don't show native number spinners; the trailing area stays clean. */
input.phx-field__control[type="number"] {
    -moz-appearance: textfield;
}

input.phx-field__control[type="number"]::-webkit-outer-spin-button,
input.phx-field__control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Reserve room for the trailing icon (24dp icon + 12dp inset per spec). */
.phx-field__box:has(.phx-field__trailing, .phx-field__trailing-button) .phx-field__control {
    padding-right: 3rem !important;
}

/* A caller-supplied placeholder must not fight the resting label for the
   same spot: per MD3 it only shows once the label has floated (focus). The
   single-space float-driver placeholder is unaffected — it has no glyphs. */
.phx-field__control:not(:focus)::placeholder {
    color: transparent;
}

.phx-field__control:focus::placeholder {
    color: rgb(var(--md-sys-color-on-surface-variant));
}

/* Split phone field: the country prefix and the national number are separate
   controls, each in its own outline, sharing the row evenly. Below the
   breakpoint an even half would clip the country name, so the pair stacks
   instead. Containment sits on .phx-field, not the row: a container query
   cannot size an element against a context that element establishes. */
/* A fieldset (the two parts are one answer); its default border, padding
   and min-content width go. One row at every width, as a phone number is
   written: a narrow country box — its choices lead with the code, so the
   code stays in view when the name is cut off — and the number. The gap is
   the form's own gap between fields (--phx-field-gap), so the pair keeps the
   form's rhythm. */
.phx-phone {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--phx-field-gap, 1.5rem);
}

/* A native select cuts its text off without an ellipsis; a country name too
   long for the box fades out before the arrow instead of stopping mid-letter.
   The text ends 3rem from the right, where the arrow's space begins. */
.phx-phone__prefix .phx-field__control {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.25rem), transparent calc(100% - 3rem));
    mask-image: linear-gradient(to right, #000 calc(100% - 4.25rem), transparent calc(100% - 3rem));
}

/* Multiline variant: the container grows with the textarea and the resting
   label pins to the first text line instead of the vertical center. */
.phx-field__box--textarea {
    height: auto;
    min-height: 56px;
}

textarea.phx-field__control {
    padding: 1rem !important;
    resize: vertical;
    line-height: 1.5rem;
    min-height: 56px;
}

.phx-field__box--textarea .phx-field__label {
    top: 1.75rem;
}

.phx-field__control:focus ~ .phx-field__label,
.phx-field__control:not(:placeholder-shown) ~ .phx-field__label {
    /* Repeated after the --textarea override so floating wins there too. */
    top: 0;
}

/* Interactive trailing slot (password visibility, date/time pickers):
   24dp icon centered in a 40dp round target, 4dp from the field edge so the
   icon itself sits at the spec's 12dp inset. */
.phx-field__trailing-button {
    position: absolute;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgb(var(--md-sys-color-on-surface-variant));
    cursor: pointer;
    transition: background-color 150ms var(--md-sys-motion-easing-standard);
}

.phx-field__trailing-button:hover {
    background-color: rgb(var(--md-sys-color-on-surface) / 0.08);
}

.phx-field__trailing-button:focus-visible {
    outline: 2px solid rgb(var(--md-sys-color-primary));
    outline-offset: 1px;
}

.phx-field__trailing-button svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

/* Native pickers get our trailing button instead of the browser's inline
   indicator. Unscoped from :has() and !important-ed: Wagtail admin ships its
   own date-input chrome, which otherwise leaves two calendar icons side by
   side. background-image is re-asserted for the same reason — some admin
   skins paint an icon onto the input itself. */
.phx-field input.phx-field__control::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.phx-field input.phx-field__control,
.phx-field select.phx-field__control {
    background-image: none !important;
}

/* Firefox exposes no pseudo-element for its native date-picker icon, which
   it paints just inside the input's right padding edge. Shrink the right
   padding so the icon lands entirely within the trailing-button strip, then
   clip that strip away — our trailing button is a sibling, so it is not
   clipped and remains the single visible calendar icon. Scoped to Firefox
   via @supports; in Chromium the indicator is hidden by the rule above. */
@supports (-moz-appearance: none) {
    .phx-field__box:has(.phx-field__trailing-button) input.phx-field__control {
        padding-right: 0.5rem !important;
        clip-path: inset(0 2.75rem 0 0);
    }
}

/* Group label for checkbox/radio groups: styled like a floated field label,
   since these controls have no container to notch it into. */
.phx-field__group-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--md-sys-color-on-surface-variant));
}

.phx-field--error .phx-field__group-label {
    color: rgb(var(--md-sys-color-error));
}

/* ── MD3 anatomy for the search-family widgets ──
   (single_select_search). The pill trigger becomes the
   outlined field's control; label/outline live outside the HTMX swap target,
   so float state is driven by :has() — a hidden input exists only while
   something is selected, and aria-expanded flags an open panel. */

/* The outlined wrapper is a flex row; without explicit sizes the swap
   container shrinks to its content (an empty trigger label), leaving only a
   small clickable square — force the control chain to fill the field. */
.phx-single-select-search__box .phx-single-select-search__container,
.phx-single-select-search__box .phx-single-select-search__input {
    height: 100%;
    width: 100%;
    min-width: 0;
}

.phx-single-select-search__trigger.phx-field__control {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
    /* Rich item templates can render multi-line content taller than the
       56px field — clip instead of spilling over the outline. */
    overflow: hidden;
}

/* Optional trigger placeholder: hidden while closed (the resting label
   occupies that spot), revealed while the panel is open — MD3 placeholder
   semantics. */
.phx-single-select-search__placeholder {
    opacity: 0;
    color: rgb(var(--md-sys-color-on-surface-variant));
    transition: opacity 150ms var(--md-sys-motion-easing-standard);
}

.phx-single-select-search__box:has(.phx-single-select-search__trigger[aria-expanded="true"]) .phx-single-select-search__placeholder {
    opacity: 1;
}

/* Float the label / open the notch when something is selected (hidden input
   present) or the panel is open. */
.phx-single-select-search__box:has(input[type="hidden"]) .phx-field__label,
.phx-single-select-search__box:has(.phx-single-select-search__trigger[aria-expanded="true"]) .phx-field__label {
    top: 0;
    font-size: 0.75rem;
}

.phx-single-select-search__box:has(input[type="hidden"]) .phx-field__notch,
.phx-single-select-search__box:has(.phx-single-select-search__trigger[aria-expanded="true"]) .phx-field__notch {
    padding: 0 0.25rem;
    max-width: 100%;
}

/* Open/keyboard-focused trigger mirrors the control focus state. */
.phx-single-select-search__box:has(.phx-single-select-search__trigger[aria-expanded="true"]) .phx-field__outline,
.phx-single-select-search__box:has(.phx-single-select-search__trigger:focus-visible) .phx-field__outline {
    border-width: 2px;
    border-color: rgb(var(--md-sys-color-primary));
}

.phx-single-select-search__box:has(.phx-single-select-search__trigger[aria-expanded="true"]) .phx-field__label {
    color: rgb(var(--md-sys-color-primary));
}

/* Error keeps the whole field in error color, beating the open-state primary
   (same specificity, later in the cascade). */
.phx-field--error .phx-single-select-search__box .phx-field__outline {
    border-color: rgb(var(--md-sys-color-error));
}

.phx-field--error .phx-single-select-search__box .phx-field__label {
    color: rgb(var(--md-sys-color-error));
}

.phx-field__control option {
    background-color: rgb(var(--color-surface-50));
    color: rgb(var(--color-surface-900));
}

@media (prefers-color-scheme: dark) {
    .phx-field__control option {
        background-color: rgb(var(--color-surface-800));
        color: rgb(var(--color-surface-100));
    }
}

/* Label rests inside the field (body-large, vertically centered) and floats
   into the outline notch (body-small) on focus or when populated. "Populated"
   is :not(:placeholder-shown): text/number controls carry a single-space
   placeholder for exactly this, and a <select> can never match
   :placeholder-shown, so its label is permanently floated — correct, since a
   native select always renders a selection. */
.phx-field__label {
    position: absolute !important;
    top: 50%;
    left: 1rem !important;
    transform: translateY(-50%);
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: rgb(var(--md-sys-color-on-surface-variant));
    pointer-events: none;
    cursor: default;
    transition: top 150ms var(--md-sys-motion-easing-standard),
                font-size 150ms var(--md-sys-motion-easing-standard),
                color 150ms var(--md-sys-motion-easing-standard);
}

.phx-field__control:focus ~ .phx-field__label,
.phx-field__control:not(:placeholder-shown) ~ .phx-field__label {
    top: 0;
    font-size: 0.75rem;
}

/* The outline itself. Top inset compensates for the legend's line box so the
   border-top aligns with the visual top of the field. */
.phx-field__outline {
    position: absolute !important;
    inset: -0.375rem 0 0 0 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    /* 12px + the notch's 4px side padding = legend text starts at 16px,
       exactly under the floated label. */
    padding: 0 0.75rem !important;
    border: 1px solid rgb(var(--md-sys-color-outline));
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    transition: border-color 200ms var(--md-sys-motion-easing-standard);
}

/* The border itself stays un-!important-ed (focus/error swap width/color),
   but everything that lets the legend cut its notch gap is armored:
   Wagtail's admin CSS floats legends inline at 16.67% width, which silently
   disables the fieldset notch. */
.phx-field__notch,
fieldset.phx-field__outline > legend.phx-field__notch {
    float: none !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    height: auto !important;
    visibility: visible !important;
}

/* The notch is collapsed while the label rests inside the field and opens
   (4dp padding each side, per spec) when the label floats. */
.phx-field__notch {
    padding: 0;
    max-width: 0;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 0.75rem;
    max-height: 0.75rem;
    transition: max-width 150ms var(--md-sys-motion-easing-standard),
                padding 150ms var(--md-sys-motion-easing-standard);
}

.phx-field__control:focus ~ .phx-field__outline .phx-field__notch,
.phx-field__control:not(:placeholder-shown) ~ .phx-field__outline .phx-field__notch {
    padding: 0 0.25rem;
    max-width: 100%;
}

/* Invisible twin of the label text — only there to size the border gap. */
.phx-field__notch > span {
    visibility: hidden;
}

/* Explicitly label-less fields must never open a gap in the top border —
   !important so the focus/populated notch-opening states can't override. */
.phx-field__notch--empty {
    padding: 0 !important;
    max-width: 0 !important;
    width: 0 !important;
}

/* An empty legend has no line box, so the fieldset would draw its top border
   at the fieldset's own top edge — 6px above the field — instead of pushing
   it down through the legend's middle like labeled fields do. A zero-width
   space restores the line box without opening a notch. */
.phx-field__notch--empty::before {
    content: "\200B";
}

.phx-field__trailing {
    position: absolute;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    color: rgb(var(--md-sys-color-on-surface-variant));
    pointer-events: none;
    transition: color 200ms var(--md-sys-motion-easing-standard);
}

/* States: hover darkens the outline, focus thickens it to 2px in primary —
   no glow/box-shadow halo, per MD3. */
.phx-field__box:hover .phx-field__outline {
    border-color: rgb(var(--md-sys-color-on-surface));
}

.phx-field__control:focus ~ .phx-field__outline {
    border-width: 2px;
    border-color: rgb(var(--md-sys-color-primary));
}

.phx-field__control:focus ~ .phx-field__label {
    color: rgb(var(--md-sys-color-primary));
}

/* Error state colors the whole field, not just the message. */
.phx-field--error .phx-field__outline,
.phx-field--error .phx-field__box:hover .phx-field__outline,
.phx-field--error .phx-field__control:focus ~ .phx-field__outline {
    border-color: rgb(var(--md-sys-color-error));
}

.phx-field--error .phx-field__label,
.phx-field--error .phx-field__control:focus ~ .phx-field__label,
.phx-field--error .phx-field__supporting {
    color: rgb(var(--md-sys-color-error));
}

/* Disabled: MD3 uses on-surface at 38% for content, 12% for the outline. */
.phx-field__control:disabled {
    color: rgb(var(--md-sys-color-on-surface) / 0.38);
    cursor: default;
}

.phx-field__control:disabled ~ .phx-field__outline {
    border-color: rgb(var(--md-sys-color-on-surface) / 0.12);
}

.phx-field__control:disabled ~ .phx-field__label,
.phx-field__control:disabled ~ .phx-field__trailing {
    color: rgb(var(--md-sys-color-on-surface) / 0.38);
}

/* Supporting text replaces the hover help tooltip; also hosts errors. */
.phx-field__supporting {
    margin: 0.25rem 0 0 !important;
    padding: 0 1rem !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 1rem !important;
    color: rgb(var(--md-sys-color-on-surface-variant));
}

.phx-field__supporting span {
    display: block;
}

/* ── Dark Mode ── */

@media (prefers-color-scheme: dark) {
    /* Choice, toggle, and outlined segmented widgets are dark-mode-aware
       through the .phx-field token block; the filled segmented pill has its own
       dark rules beside it. */

    /* Search — dark mode tokens are handled by .phx-single-select-search__input media query above */

    /* Multi Select Chips — dark mode handled by the .phx-field token block. */
}