/*
 * Base reset for form controls.
 *
 * The app loads Tailwind via the standalone Play CDN build (js/tailwind.js),
 * which does NOT include the @tailwindcss/forms plugin. Without it, raw
 * <input>/<select>/<textarea> elements keep the browser's own UA styling
 * (thick native border, no padding, inconsistent height) underneath the
 * handful of utility classes (rounded-lg, border-slate-200, etc.) each view
 * applies — the utilities only override color/radius, not the base box
 * model, so fields end up looking broken. This file reproduces the same
 * baseline @tailwindcss/forms provides so every input across the app is
 * consistently sized/padded, with utility classes still free to override
 * colors/radius per field (the :where() wrapper keeps this at zero
 * specificity so a plain utility class always wins).
 */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),
:where(select),
:where(textarea) {
    appearance: none;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #cbd5e1;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    box-sizing: border-box;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

:where(textarea) {
    line-height: 1.4;
}

:where(input)::placeholder,
:where(textarea)::placeholder {
    color: #94a3b8;
    opacity: 1;
}

:where(select) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.6rem center;
    background-repeat: no-repeat;
    background-size: 1.1em 1.1em;
    padding-right: 2.25rem;
    print-color-adjust: exact;
}

:where(input:not([type="checkbox"]):not([type="radio"])):focus,
:where(select):focus,
:where(textarea):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--tw-ring-color, #6366f1);
    box-shadow: 0 0 0 1px var(--tw-ring-color, #6366f1);
}

:where(input[type="checkbox"]),
:where(input[type="radio"]) {
    appearance: none;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #4f46e5;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #94a3b8;
    box-sizing: border-box;
}

:where(input[type="checkbox"]) { border-radius: 0.28em; }
:where(input[type="radio"]) { border-radius: 100%; }

:where(input[type="checkbox"]):checked,
:where(input[type="radio"]):checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

:where(input[type="checkbox"]):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

:where(input[type="radio"]):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

:where(input[type="checkbox"]):focus,
:where(input[type="radio"]):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tw-ring-color, #6366f1);
}