/* Themed form controls for every page on the shared layout (includes/layout.php loads it right after layout.css,
   so tool-ui.css, tool-widgets.css, admin.css and page styles can still size things).

   Element defaults are wrapped in :where(), so they carry no specificity: a page class that sets a property wins,
   and nothing outside body.lay-app changes. Reusable classes for the same looks:
     .lay-field      text-like input / select / textarea look (the element defaults below, as a class)
     .lay-check      checkbox or radio drawn by the theme (the element default too)
     .lay-switch     <input type="checkbox" class="lay-switch"> (or role="switch"): a toggle switch
     .adm-switch     <label class="adm-switch"><input type="checkbox"><i></i></label>: the admin switch, same look
     .lay-range      range slider with a filled track (--fill comes from assets/layout/layout.js)
   Contrast: control borders use --ctl-line (at least 3:1 against --bg, --sub and --hover in both themes);
   placeholders use --ctl-ph (at least 4.5:1). */

:root {
    --ctl-line: #8a8a8a; --ctl-line-hover: #6b6b6b; --ctl-ph: #737373; --ctl-h: 36px; --ctl-r: 6px;
    --ctl-track: #d4d4d4; --ctl-scroll: #c9c9c9; --ctl-scroll-hover: #a8a8a8; --ctl-knob: #ffffff;
    --ctl-ring: 0 0 0 3px var(--accent-bg);
    --ctl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.7 2.6L12 5.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ctl-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --ctl-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.25 3.5 3.5 3.5-3.5' fill='none' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ctl-line: #6b6b6b; --ctl-line-hover: #8f8f8f; --ctl-ph: #8a8a8a;
        --ctl-track: #3a3a3a; --ctl-scroll: #3a3a3a; --ctl-scroll-hover: #555555; --ctl-knob: #ededed;
        --ctl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.7 2.6L12 5.4' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        --ctl-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        --ctl-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.25 3.5 3.5 3.5-3.5' fill='none' stroke='%23a1a1a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}
:root[data-theme="dark"] {
    --ctl-line: #6b6b6b; --ctl-line-hover: #8f8f8f; --ctl-ph: #8a8a8a;
    --ctl-track: #3a3a3a; --ctl-scroll: #3a3a3a; --ctl-scroll-hover: #555555; --ctl-knob: #ededed;
    --ctl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.7 2.6L12 5.4' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ctl-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --ctl-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.25 3.5 3.5 3.5-3.5' fill='none' stroke='%23a1a1a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* native widgets that are left (option lists, pickers) follow the theme; accent-color is the fallback tint */
:where(.lay-app) { accent-color: var(--accent); }

/* ---------- text fields, selects, textareas ---------- */
:where(.lay-app) :where(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
    input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
    select, textarea),
.lay-field {
    box-sizing: border-box; min-width: 0; max-width: 100%; margin: 0;
    border: 1px solid var(--ctl-line); border-radius: var(--ctl-r); background-color: var(--bg); color: var(--ink);
    font: inherit; line-height: normal; outline: none;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}
:where(.lay-app) :where(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
    input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select),
input.lay-field, select.lay-field { height: var(--ctl-h); padding: 0 10px; }
:where(.lay-app) :where(textarea), textarea.lay-field { display: block; min-height: 72px; padding: 8px 10px; line-height: 1.5; resize: vertical; }

:where(.lay-app) :where(input, textarea)::placeholder, .lay-field::placeholder { color: var(--ctl-ph); opacity: 1; }

:where(.lay-app) :where(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
    input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
    select, textarea):where(:hover:not(:disabled):not(:focus)),
.lay-field:hover:not(:disabled):not(:focus) { border-color: var(--ctl-line-hover); }

:where(.lay-app) :where(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
    input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
    select, textarea):where(:focus),
.lay-field:focus { border-color: var(--accent); box-shadow: var(--ctl-ring); outline: none; }
:where(.lay-app) :where(input, select, textarea):where(:focus-visible) { outline: none; }

/* invalid: only after the visitor touched the field (:user-invalid), or when a script marks it */
:where(.lay-app) :where(input, select, textarea):where(:user-invalid, [aria-invalid="true"], .is-invalid),
.lay-field:user-invalid, .lay-field[aria-invalid="true"], .lay-field.is-invalid { border-color: var(--bad); }
:where(.lay-app) :where(input, select, textarea):where(:user-invalid, [aria-invalid="true"], .is-invalid):where(:focus),
.lay-field[aria-invalid="true"]:focus, .lay-field.is-invalid:focus { box-shadow: 0 0 0 3px var(--bad-bg); }

:where(.lay-app) :where(input, select, textarea):where(:disabled),
.lay-field:disabled { background-color: var(--sub); border-color: var(--line2); color: var(--faint); cursor: default; opacity: 1; }
:where(.lay-app) :where(input, textarea):where([readonly]:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
.lay-field[readonly] { background-color: var(--sub); }
:where(.lay-app) :where(input, textarea):where([readonly]):where(:focus) { border-color: var(--ctl-line-hover); box-shadow: none; }

/* browser autofill keeps the theme instead of its yellow/blue wash */
:where(.lay-app) :where(input):where(:-webkit-autofill) {
    -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
    box-shadow: inset 0 0 0 100px var(--accent-bg); transition: background-color 9999s 0s;
}

/* select: custom chevron; a listbox (multiple / size) gets none */
:where(.lay-app) :where(select:not([multiple]):not([size])), select.lay-field:not([multiple]):not([size]) {
    appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
    background-image: var(--ctl-chev); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px 16px;
    text-overflow: ellipsis; white-space: nowrap;
}
:where(.lay-app) :where(select):where(:disabled) { cursor: default; opacity: .6; }
:where(.lay-app) :where(select) option { background-color: var(--bg); color: var(--ink); }
:where(.lay-app) :where(select[multiple], select[size]) {
    height: auto; min-height: 96px; padding: 4px; overflow-y: auto; scrollbar-width: thin;
}
:where(.lay-app) :where(select[multiple], select[size]) option { padding: 5px 8px; border-radius: 4px; }
:where(.lay-app) :where(select[multiple], select[size]) option:checked { background: var(--accent-bg) linear-gradient(var(--accent-bg), var(--accent-bg)); color: var(--ink); }

/* number: the theme drops the native spinners (arrow keys and the wheel still step) */
:where(.lay-app) :where(input[type="number"]) { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
:where(.lay-app) :where(input[type="number"])::-webkit-inner-spin-button,
:where(.lay-app) :where(input[type="number"])::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* search: themed clear button */
:where(.lay-app) :where(input[type="search"])::-webkit-search-cancel-button {
    -webkit-appearance: none; width: 14px; height: 14px; margin-left: 6px; cursor: pointer; background-color: var(--faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 4.5 7 7m0-7-7 7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 4.5 7 7m0-7-7 7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
:where(.lay-app) :where(input[type="search"])::-webkit-search-cancel-button:hover { background-color: var(--ink); }

/* date and time: the picker follows color-scheme (set on :root by the theme); the icon is tinted by the theme */
:where(.lay-app) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]) {
    font-family: var(--f-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
:where(.lay-app) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-datetime-edit-fields-wrapper { padding: 0; }
:where(.lay-app) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-datetime-edit-text { color: var(--faint); }
:where(.lay-app) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator {
    width: 14px; height: 14px; padding: 2px; margin-left: 6px; border-radius: 4px; cursor: pointer; opacity: 1;
    background: var(--dim);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/svg%3E") center / 14px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/svg%3E") center / 14px no-repeat;
}
:where(.lay-app) :where(input[type="time"])::-webkit-calendar-picker-indicator {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='M8 5v3l2 1.5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='M8 5v3l2 1.5'/%3E%3C/svg%3E");
}
:where(.lay-app) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator:hover { background: var(--accent); }

/* ---------- checkbox and radio ---------- */
:where(.lay-app) :where(input[type="checkbox"]:not(.lay-switch):not([role="switch"]), input[type="radio"]),
input.lay-check {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    box-sizing: border-box; flex: none; display: inline-grid; place-content: center; vertical-align: -3px;
    width: 16px; height: 16px; margin: 0; padding: 0;
    border: 1px solid var(--ctl-line); border-radius: 4px; background-color: var(--bg);
    background-repeat: no-repeat; background-position: center; background-size: 0 0;
    cursor: pointer; color: var(--ink);
    transition: background-color .12s, border-color .12s, background-size .14s ease-out, box-shadow .12s;
}
:where(.lay-app) :where(input[type="radio"]), input[type="radio"].lay-check { border-radius: 50%; }
:where(.lay-app) :where(input[type="checkbox"]:not(.lay-switch):not([role="switch"]), input[type="radio"]):where(:hover:not(:disabled)),
input.lay-check:hover:not(:disabled) { border-color: var(--ctl-line-hover); }
:where(.lay-app) :where(input[type="checkbox"]:not(.lay-switch):not([role="switch"])):where(:checked),
input[type="checkbox"].lay-check:checked {
    border-color: var(--accent); background-color: var(--accent); background-image: var(--ctl-check); background-size: 14px 14px;
}
:where(.lay-app) :where(input[type="checkbox"]:not(.lay-switch):not([role="switch"])):where(:indeterminate),
input[type="checkbox"].lay-check:indeterminate {
    border-color: var(--accent); background-color: var(--accent); background-image: var(--ctl-dash); background-size: 14px 14px;
}
/* radio dot: an inset ring of the page colour inside the accent fill */
:where(.lay-app) :where(input[type="radio"]):where(:checked), input[type="radio"].lay-check:checked {
    border-color: var(--accent); background-color: var(--accent); box-shadow: inset 0 0 0 3.5px var(--bg);
}
:where(.lay-app) :where(input[type="checkbox"], input[type="radio"]):where(:focus-visible),
input.lay-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.lay-app) :where(input[type="checkbox"], input[type="radio"]):where(:disabled),
input.lay-check:disabled { cursor: default; opacity: .45; }
:where(.lay-app) :where(input[type="checkbox"], input[type="radio"]):where(:user-invalid, [aria-invalid="true"]) { border-color: var(--bad); }

/* labels that wrap a box line up with it and keep a 24px target (44px on touch screens) */
:where(.lay-app) :where(label:has(> input[type="checkbox"], > input[type="radio"])) { cursor: pointer; min-height: 24px; }
:where(.lay-app) :where(label:has(> input:disabled)) { cursor: default; }

/* ---------- toggle switch ---------- */
:where(.lay-app) :where(input[type="checkbox"][role="switch"]),
input[type="checkbox"].lay-switch {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    box-sizing: border-box; flex: none; display: inline-block; vertical-align: middle;
    width: 32px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: radial-gradient(circle closest-side, var(--ctl-knob) 92%, transparent 100%) 2px 50% / 14px 14px no-repeat, var(--ctl-line);
    transition: background-position .15s ease, background-color .15s;
}
:where(.lay-app) :where(input[type="checkbox"][role="switch"]):where(:checked),
input[type="checkbox"].lay-switch:checked { background-color: var(--accent); background-position: 16px 50%; }
:where(.lay-app) :where(input[type="checkbox"][role="switch"]):where(:focus-visible),
input[type="checkbox"].lay-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.lay-app) :where(input[type="checkbox"][role="switch"]):where(:disabled),
input[type="checkbox"].lay-switch:disabled { cursor: default; opacity: .45; }

/* the admin switch markup (<label class="adm-switch"><input type="checkbox"><i></i></label>) draws the same switch */
.adm-switch { position: relative; display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; vertical-align: middle; flex: none; }
.adm-switch input[type="checkbox"] {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
    appearance: none; -webkit-appearance: none; border: 0; background: none; box-shadow: none;
}
.adm-switch i {
    display: block; width: 32px; height: 18px; border-radius: 999px; position: relative; flex: none;
    background: var(--ctl-line); transition: background-color .15s;
}
.adm-switch i::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--ctl-knob); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.adm-switch input:checked + i { background: var(--accent); }
.adm-switch input:checked + i::after { transform: translateX(14px); }
.adm-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-switch input:disabled, .adm-switch input:disabled + i { cursor: default; }
.adm-switch input:disabled + i { opacity: .45; }
.adm-switch:hover input:not(:checked):not(:disabled) + i { background: var(--ctl-line-hover); }

/* ---------- range slider ---------- */
:where(.lay-app) :where(input[type="range"]), input[type="range"].lay-range {
    --fill: 50%;
    appearance: none; -webkit-appearance: none; box-sizing: border-box;
    width: 100%; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
}
:where(.lay-app) :where(input[type="range"])::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px; border: 0;
    background: linear-gradient(to right, var(--accent) 0 var(--fill), var(--ctl-track) var(--fill) 100%);
}
:where(.lay-app) :where(input[type="range"])::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; box-sizing: border-box;
    width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
    border: 2px solid var(--accent); background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .12s, box-shadow .12s;
}
:where(.lay-app) :where(input[type="range"])::-moz-range-track { height: 4px; border-radius: 999px; border: 0; background: var(--ctl-track); }
:where(.lay-app) :where(input[type="range"])::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
:where(.lay-app) :where(input[type="range"])::-moz-range-thumb {
    box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--accent); background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .12s, box-shadow .12s;
}
:where(.lay-app) :where(input[type="range"]):where(:hover:not(:disabled))::-webkit-slider-thumb { transform: scale(1.1); }
:where(.lay-app) :where(input[type="range"]):where(:hover:not(:disabled))::-moz-range-thumb { transform: scale(1.1); }
:where(.lay-app) :where(input[type="range"]):where(:focus) { outline: none; }
:where(.lay-app) :where(input[type="range"]):where(:focus-visible)::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-bg), 0 0 0 5px var(--accent); }
:where(.lay-app) :where(input[type="range"]):where(:focus-visible)::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-bg), 0 0 0 5px var(--accent); }
:where(.lay-app) :where(input[type="range"]):where(:disabled) { cursor: default; opacity: .45; }

/* ---------- file ---------- */
:where(.lay-app) :where(input[type="file"]) {
    max-width: 100%; color: var(--dim); font: inherit; font-size: 12.5px; border-radius: var(--ctl-r);
}
:where(.lay-app) :where(input[type="file"])::file-selector-button {
    height: 30px; margin: 0 10px 0 0; padding: 0 12px; border: 1px solid var(--ctl-line); border-radius: var(--ctl-r);
    background: var(--bg); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .12s, border-color .12s;
}
:where(.lay-app) :where(input[type="file"])::file-selector-button:hover { background: var(--hover); border-color: var(--ctl-line-hover); }
:where(.lay-app) :where(input[type="file"]):where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.lay-app) :where(input[type="file"]):where(:disabled)::file-selector-button { cursor: default; opacity: .5; }

/* ---------- colour swatch ---------- */
:where(.lay-app) :where(input[type="color"]) {
    appearance: none; -webkit-appearance: none; box-sizing: border-box;
    width: 36px; height: var(--ctl-h); padding: 3px; margin: 0; border: 1px solid var(--ctl-line); border-radius: var(--ctl-r);
    background: var(--bg); cursor: pointer;
}
:where(.lay-app) :where(input[type="color"])::-webkit-color-swatch-wrapper { padding: 0; }
:where(.lay-app) :where(input[type="color"])::-webkit-color-swatch { border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
:where(.lay-app) :where(input[type="color"])::-moz-color-swatch { border: 0; border-radius: 4px; }
:where(.lay-app) :where(input[type="color"]):where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* assets/modal.js injects a light-only prompt field at runtime; on the layout it takes the field look */
.lay-app .modal-prompt-input { height: var(--ctl-h); padding: 0 10px; border: 1px solid var(--ctl-line); border-radius: var(--ctl-r); background: var(--bg); color: var(--ink); font: inherit; }
.lay-app .modal-prompt-input:focus { border-color: var(--accent); box-shadow: var(--ctl-ring); outline: none; }

/* ---------- buttons: every page button has a class (ui-btn, lay-btn, ...); this only covers the disabled cursor (each button class dims itself) ---------- */
:where(.lay-app) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):where(:disabled) { cursor: default; }

/* ---------- progress and meter ---------- */
:where(.lay-app) :where(progress, meter) {
    appearance: none; -webkit-appearance: none; box-sizing: border-box; display: inline-block; vertical-align: middle;
    width: 160px; height: 6px; border: 0; border-radius: 999px; background: var(--sel); overflow: hidden; color: var(--accent);
}
:where(.lay-app) :where(progress)::-webkit-progress-bar { background: var(--sel); border-radius: 999px; }
:where(.lay-app) :where(progress)::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .2s; }
:where(.lay-app) :where(progress)::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
:where(.lay-app) :where(meter)::-webkit-meter-bar { height: 6px; border: 0; border-radius: 999px; background: var(--sel); }
:where(.lay-app) :where(meter)::-webkit-meter-optimum-value { background: var(--ok); border-radius: 999px; }
:where(.lay-app) :where(meter)::-webkit-meter-suboptimum-value { background: var(--warn); border-radius: 999px; }
:where(.lay-app) :where(meter)::-webkit-meter-even-less-good-value { background: var(--bad); border-radius: 999px; }
:where(.lay-app) :where(meter):-moz-meter-optimum::-moz-meter-bar { background: var(--ok); }
:where(.lay-app) :where(meter):-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
:where(.lay-app) :where(meter):-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--bad); }

/* ---------- details / summary ---------- */
:where(.lay-app) :where(details > summary) { cursor: pointer; border-radius: 4px; }
:where(.lay-app) :where(details > summary)::marker { color: var(--faint); }
:where(.lay-app) :where(details > summary):where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- thin themed scrollbars in panels, lists and code blocks ---------- */
:where(.lay-app) :where(*) { scrollbar-width: thin; scrollbar-color: var(--ctl-scroll) transparent; }
:where(.lay-app) :where(*):where(:hover) { scrollbar-color: var(--ctl-scroll-hover) transparent; }
html:has(> body.lay-app) { scrollbar-color: var(--ctl-scroll) var(--bg); }

/* ---------- touch screens: 44px rows for checkboxes and radios ---------- */
@media (pointer: coarse) {
    :where(.lay-app) :where(label:has(> input[type="checkbox"], > input[type="radio"])) { min-height: 44px; }
    :where(.lay-app) :where(input[type="checkbox"]:not(.lay-switch):not([role="switch"]), input[type="radio"]),
    input.lay-check { width: 20px; height: 20px; }
    :where(.lay-app) :where(input[type="checkbox"]):where(:checked, :indeterminate) { background-size: 17px 17px; }
    :where(.lay-app) :where(input[type="radio"]):where(:checked) { box-shadow: inset 0 0 0 4.5px var(--bg); }
}

@media (prefers-reduced-motion: reduce) {
    /* one rule per vendor pseudo-element: an unknown one would drop the whole selector list */
    :where(.lay-app) :where(input)::-webkit-slider-thumb { transition: none; }
    :where(.lay-app) :where(input)::-moz-range-thumb { transition: none; }
    :where(.lay-app) :where(input[type="file"])::file-selector-button { transition: none; }
    :where(.lay-app) :where(progress)::-webkit-progress-value { transition: none; }
    :where(.lay-app) :where(input, select, textarea, progress, meter, button),
    .lay-field, input.lay-check, input.lay-switch, .adm-switch i, .adm-switch i::after { transition: none !important; }
}