/* DM form controls: the custom dropdown (opened menu included) and every legacy input type, styled to match.
   Colours come from the surrounding section (currentColor + --bg + --focus), so it works on any concept. */

/* ---------- custom dropdown (listbox) ---------- */
.dd { position: relative; }
.dd__btn { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: start; padding: 0 16px; border-radius: var(--radius-field); border: 1.5px solid color-mix(in srgb, currentColor 72%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); color: inherit; font-size: 16px; }
.dd__btn:focus-visible, .dd__btn[aria-expanded="true"] { outline: 3px solid var(--focus); outline-offset: 2px; border-color: currentColor; border-radius: var(--radius-field); }
.dd__btn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.dd__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd__list { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 8px); max-height: min(280px, 46vh); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none; border-radius: min(var(--radius-field), 18px); border: 1.5px solid currentColor; background-color: color-mix(in srgb, currentColor 11%, var(--dd-base, var(--bg))); background-image: linear-gradient(var(--dd-base, var(--bg)), var(--dd-base, var(--bg))); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); animation: dd-in .16s ease-out; }
.dd.is-up .dd__list { top: auto; bottom: calc(100% + 8px); }
.dd__list li { min-height: 44px; display: flex; align-items: center; padding: 8px 14px; border-radius: 10px; font-size: 16px; line-height: 1.4; cursor: pointer; }
.dd__list li span { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; }
.dd__list li.is-active { background: color-mix(in srgb, currentColor 20%, transparent); }
.dd__list li[aria-selected="true"] { background: currentColor; }
.dd__list li[aria-selected="true"] span { color: var(--dd-base, var(--bg)); }
.dd__list li[aria-selected="true"] span::after { content: "\2713"; font-weight: 700; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- legacy input types ---------- */
select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-inline-end: 44px !important; }
[dir="rtl"] select { background-position: left 14px center; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; cursor: pointer; }
input[type="number"] { -moz-appearance: textfield; }
input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .85; }
[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(1); }
input::placeholder, textarea::placeholder { color: currentColor; opacity: .7; }
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
input[type="color"] { padding: 6px; width: 64px; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }

/* checkbox + radio:  <label class="choice"><input type="checkbox"> Text</label> */
.choice { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 16px; }
.choice input { -webkit-appearance: none; appearance: none; flex: none; width: 24px !important; height: 24px; min-height: 0 !important; margin: 1px 0 0; padding: 0 !important; border: 2px solid currentColor !important; background: transparent !important; display: grid; place-content: center; cursor: pointer; }
.choice input[type="checkbox"] { border-radius: 6px; }
.choice input[type="radio"] { border-radius: 50%; }
.choice input::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .15s ease; background: currentColor; }
.choice input[type="checkbox"]::before { clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); width: 14px; height: 14px; }
.choice input[type="radio"]::before { border-radius: 50%; }
.choice input:checked::before { transform: scale(1); }
.choice input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* file */
input[type="file"] { padding: 8px !important; display: flex; align-items: center; }
input[type="file"]::file-selector-button { margin-inline-end: 14px; min-height: 36px; padding: 0 18px; border-radius: 999px; background: transparent; border: 2px solid currentColor; color: inherit; font: 700 14px var(--f-body); cursor: pointer; }

/* range, progress, meter */
input[type="range"] { -webkit-appearance: none; appearance: none; min-height: 44px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 35%, transparent); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 35%, transparent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; border: 3px solid var(--bg); background: currentColor; box-shadow: 0 0 0 2px currentColor; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--bg); background: currentColor; box-shadow: 0 0 0 2px currentColor; }
input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
progress, meter { width: 100%; height: 10px; accent-color: currentColor; }