/* controls.css: look and box metrics of native elements (docs/DESIGN.md 4.4).
   Loaded on every page, second, after tokens.css. Tokens only: no color, shadow, duration or z-index literals.
   Side effects on pages with their own CSS (2.1): fields, selects and textareas get the control height, padding,
   border, radius, background and font size; checkbox, radio, switch and color inputs get a fixed size; ranges get
   --tap-min height; form controls inherit the font; focus rings, scrollbars, selection, placeholder and autofill
   colors change everywhere. Nothing here sets width, display, margin or position on layout blocks, changes the
   height a textarea gets from rows=, grows textareas (opt-in .ta-auto lives in ls.css) or touches <summary>. */

/* 1. Inheritance and touch */
button, input, select, textarea, optgroup { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:where(button, a, summary, label, [role="button"], input, select, textarea) {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html { accent-color: var(--control-checked); scrollbar-color: var(--scroll-thumb) var(--bg); }
input, textarea { caret-color: var(--accent-strong); }
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* 2. Focus (3.6): one ring everywhere; fields add a halo instead (section 3) */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; } }

/* 3. Text fields */
:where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
       input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="time"],
       input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea) {
  min-height: var(--control-h); padding: 0 var(--control-px);
  border: var(--control-border-w) solid var(--border-strong); border-radius: var(--radius-control);
  background-color: var(--control-bg); color: var(--text);
  font-size: var(--fs-control); font-weight: var(--fw-regular); line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
textarea { padding: var(--space-3) var(--control-px); line-height: 1.5; resize: vertical; }
/* No min-height beyond one control and no field-sizing here, so rows= keeps working. ls.css adds the
   default height for textareas without rows= and the opt-in .ta-auto (5.2). */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea):is(:hover, .is-hover):not(:disabled, :focus) {
  border-color: var(--border-hover);
}
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea):is(:focus, .is-focus) {
  outline: 2px solid transparent; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-halo);
}
:where(input, select, textarea)[aria-invalid="true"], :where(input, select, textarea):user-invalid { border-color: var(--danger); }
:where(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-halo); }
:where(input, select, textarea):disabled {
  background-color: var(--surface-2); color: var(--faint); -webkit-text-fill-color: var(--faint);
  border-color: var(--border); cursor: not-allowed;
}
:where(input, textarea)[readonly] { background-color: var(--surface-2); border-style: dashed; }
::placeholder { color: var(--faint); opacity: 1; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--control-bg) inset; transition: background-color 9999s;   /* the standard autofill workaround; the lint allows it */
}
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--control-bg) inset, 0 0 0 3px var(--focus-halo); }

/* 4. Select (5.3) */
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
  padding-right: calc(var(--control-px) + 24px);
  background-image: var(--icon-chevron); background-repeat: no-repeat;
  background-position: right var(--control-px) center; background-size: 16px;
}
select:disabled { background-image: var(--icon-chevron); opacity: .7; }
select[multiple] { padding: var(--space-2); }
select option { color: var(--text); background: var(--control-bg); }

/* 5. Number: no spin buttons; steppers where stepping helps (5.10) */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* 6. Search (5.9) */
input[type="search"] {
  padding-left: calc(var(--control-px) + 26px);
  background-image: var(--icon-search); background-repeat: no-repeat;
  background-position: left var(--control-px) center; background-size: 18px;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; width: 18px; height: 18px; margin-left: var(--space-2);
  background: var(--icon-clear) center / 18px no-repeat; opacity: .75; cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }

/* 7. Date and time (5.11): the native popup stays, the field and its icon are ours */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { font-variant-numeric: tabular-nums; }
input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator {
  width: 18px; height: 18px; padding: 3px; border-radius: var(--radius-xs); cursor: pointer; opacity: .8;
  color: transparent; background: var(--icon-calendar) center / 18px no-repeat;
}
input[type="time"]::-webkit-calendar-picker-indicator { background-image: var(--icon-clock); }
/* A text field with a <datalist> (thread, brand) gets the select's chevron, not a calendar */
input[list]:not([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator {
  width: 18px; height: 18px; padding: 3px; border-radius: var(--radius-xs); cursor: pointer; opacity: .8;
  color: transparent; background: var(--icon-chevron) center / 18px no-repeat;
}
input::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--surface-2); }
::-webkit-datetime-edit, ::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }   /* iOS centres the value otherwise */

/* 8. File: stragglers only; use the drop zone or file button (5.7) */
input[type="file"] { font-size: var(--fs-small); color: var(--muted); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: var(--space-3); min-height: var(--btn-h-sm); padding: 0 var(--btn-px-sm);
  border: var(--btn-border-w) solid var(--border-strong); border-radius: var(--btn-radius);
  background: var(--surface); color: var(--text); font: var(--fw-bold) var(--fs-btn-sm)/1.2 var(--font-body);
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard);
}
input[type="file"]:hover::file-selector-button { background: var(--surface-2); }

/* 9. Checkbox and radio (5.4) */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; vertical-align: -.2em;
  width: var(--check-size); height: var(--check-size); margin: 0;
  border: 1.5px solid var(--border-strong); background-color: var(--control-bg);
  background-position: center; background-repeat: no-repeat; background-size: calc(var(--check-size) * .75);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
input[type="checkbox"] { border-radius: var(--check-radius); }
input[type="radio"] { border-radius: 50%; }
:is(input[type="checkbox"], input[type="radio"]):is(:hover, .is-hover):not(:checked, :disabled) { border-color: var(--border-hover); }
input[type="checkbox"]:checked { background-color: var(--control-checked); border-color: var(--control-checked); background-image: var(--icon-check); }
input[type="checkbox"]:indeterminate { background-color: var(--control-checked); border-color: var(--control-checked); background-image: var(--icon-dash); }
input[type="radio"]:checked {
  background-color: var(--control-checked); border-color: var(--control-checked);
  box-shadow: inset 0 0 0 calc(var(--check-size) * .2) var(--control-bg);
}
:is(input[type="checkbox"], input[type="radio"])[aria-invalid="true"] { border-color: var(--danger); }
:is(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: not-allowed; }
@media (forced-colors: active) { input[type="checkbox"]:not(.switch), input[type="radio"] { appearance: auto; } }

/* 10. Switch (5.5): a checkbox with class="switch" role="switch" */
input[type="checkbox"].switch {
  width: var(--switch-w); height: var(--switch-h); border-radius: var(--radius-pill);
  border: 1px solid transparent; background-color: var(--border-strong);
  background-image: radial-gradient(circle closest-side, var(--switch-thumb) 92%, transparent 100%);
  background-size: var(--switch-thumb-size) var(--switch-thumb-size);
  background-position: calc((var(--switch-h) - var(--switch-thumb-size)) / 2 - 1px) center;
  transition: background-color var(--dur-base) var(--ease-standard), background-position var(--dur-base) var(--ease-standard);
}
input[type="checkbox"].switch:is(:hover, .is-hover):not(:checked, :disabled) { background-color: var(--border-hover); }
input[type="checkbox"].switch:checked {
  background-color: var(--control-checked);
  background-position: calc(100% - (var(--switch-h) - var(--switch-thumb-size)) / 2 + 1px) center;
}
@media (forced-colors: active) { input[type="checkbox"].switch { border-color: CanvasText; } }

/* 11. Range (5.6). ui.js keeps --pct in sync with the value and adds html.ls-js; without it the
   WebKit track shows no fill rather than a fill that doesn't match the value. */
input[type="range"] {
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
  height: var(--tap-min); --pct: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: var(--range-track-h); border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--control-checked) var(--pct), var(--track) var(--pct));
}
html:not(.ls-js) input[type="range"]::-webkit-slider-runnable-track { background: var(--track); }
input[type="range"]::-moz-range-track { height: var(--range-track-h); border-radius: var(--radius-pill); background: var(--track); }
input[type="range"]::-moz-range-progress { height: var(--range-track-h); border-radius: var(--radius-pill); background: var(--control-checked); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--range-thumb); height: var(--range-thumb);
  margin-top: calc((var(--range-track-h) - var(--range-thumb)) / 2);
  border-radius: 50%; border: 2px solid var(--control-checked); background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
input[type="range"]::-moz-range-thumb {
  width: var(--range-thumb); height: var(--range-thumb); border-radius: 50%;
  border: 2px solid var(--control-checked); background: var(--white); box-shadow: var(--shadow-sm);
}
@media (hover: hover) { input[type="range"]:is(:hover, .is-hover)::-webkit-slider-thumb { transform: scale(1.08); } }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:is(:focus-visible, .is-focus)::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus-ring); }
input[type="range"]:is(:focus-visible, .is-focus)::-moz-range-thumb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus-ring); }
input[type="range"]:disabled { opacity: .5; cursor: not-allowed; }

/* 12. Disclosure marker: not here. It lives in ls.css (5.23), so the Workbench's own <summary> markers are untouched. */

/* 13. Scrollbars for inner scroll areas */
body * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid transparent; background-clip: padding-box; border-radius: var(--radius-pill); }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
}

/* 14. Color input (5.10), paired with a hex text field */
input[type="color"] {
  appearance: none; -webkit-appearance: none; width: var(--control-h); height: var(--control-h); padding: 4px;
  border: var(--control-border-w) solid var(--border-strong); border-radius: var(--radius-control);
  background: var(--control-bg); cursor: pointer;
}
input[type="color"]:is(:hover, .is-hover):not(:disabled) { border-color: var(--border-hover); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-control) - 4px); }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: calc(var(--radius-control) - 4px); }

/* 15. Reduced motion (3.12). Freezing everything would leave two things lying, so spinners keep turning
   slowly and indeterminate progress becomes a still striped bar next to its visible label. */
@media (prefers-reduced-motion: reduce) {
  :root, [data-density] { --btn-lift: 0px; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Essential status motion: kept, slowed */
  .spinner, .btn[aria-busy="true"]::after, .progress-inline::before, .lsqp-progress::before {
    animation-duration: var(--dur-spin-calm) !important;
    animation-iteration-count: infinite !important;
  }
  /* Indeterminate progress: a still, striped, full-width bar; the visible label says it is working */
  .progress.is-indeterminate > span {
    width: 100% !important; animation: none !important;
    background: repeating-linear-gradient(-45deg, var(--accent-strong) 0 8px,
                color-mix(in srgb, var(--accent-strong) 55%, transparent) 8px 16px);
  }
}