/* App-wide look for the form controls the browser would otherwise draw itself: no default HTML UI on any page.
   Linked on every page (some pages have no Tailwind preflight, so this is its own file rather than output.css).
   Rules are wrapped in :where() (zero specificity) so a page's own size or colour rules still win.
   Left to the browser / OS on purpose: the calendar / clock / colour pop-ups of the remaining native inputs,
   phone pickers, alert / confirm / print dialogs.
   Selects: give them class "kw-select" (closed look here; the themed list comes from cars-select.js + .css). */

:root {
  --ui-accent: var(--dp-accent, #facc15);
  --ui-box-bg: #1a1a1a;
  --ui-box-border: #5b5b5b;
  --ui-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ui-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html.theme-light, html.theme-pink, html.season-halloween {
  --ui-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ui-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
html.theme-light { --ui-accent: var(--dp-accent, #ca8a04); --ui-box-bg: #fff; --ui-box-border: #94a3b8; }
html.theme-pink { --ui-accent: var(--dp-accent, #ec4899); --ui-box-bg: #fff; --ui-box-border: #e79bbf; }
html.season-retro { --ui-accent: #ff3ec9; --ui-box-bg: #211a3d; --ui-box-border: #6b5aa8; }   /* same pink the retro ticks already used */
html.season-halloween { --ui-accent: #c42a31; --ui-box-bg: #171314; --ui-box-border: #5a4a4c; }

/* Pages without Tailwind preflight (TSB search, What's new): controls use the page font, not the browser's */
:where(button, input, select, textarea) { font-family: inherit; }

/* Tick boxes and radios */
:where(input[type="checkbox"], input[type="radio"]) {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: none;
  width: 1rem; height: 1rem; border: 1.5px solid var(--ui-box-border); border-radius: 4px;
  background-color: var(--ui-box-bg); background-repeat: no-repeat; background-position: center; background-size: 80% 80%;
  cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):hover:not(:disabled) { border-color: var(--ui-accent); }
:where(input[type="checkbox"]):checked { background-color: var(--ui-accent); border-color: var(--ui-accent); background-image: var(--ui-tick); }
:where(input[type="checkbox"]):indeterminate { background-color: var(--ui-accent); border-color: var(--ui-accent); background-image: var(--ui-dash); }
:where(input[type="radio"]):checked { border-color: var(--ui-accent); box-shadow: inset 0 0 0 3px var(--ui-box-bg), inset 0 0 0 1rem var(--ui-accent); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: not-allowed; }

/* Shared select look (closed). !important on the chevron: theme and season rules set the `background` shorthand on .form-input */
select.kw-select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 2.2rem !important;
  background-image: var(--ui-chevron) !important; background-repeat: no-repeat !important;
  background-position: right .8rem center !important; background-size: 12px !important;
}
select.kw-select:disabled { cursor: not-allowed; opacity: .6; }

/* Number boxes: no browser spin arrows (typing and the arrow keys still work) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* Date / time inputs the pages leave native: the browser icon and pop-up follow the theme */
:where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]) { color-scheme: dark; }
html.theme-light :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]) { color-scheme: light; }
:where(input)::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
:where(input)::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Colour swatch (Manage lists tile colours): just the swatch, no browser button chrome */
:where(input[type="color"]) { -webkit-appearance: none; appearance: none; cursor: pointer; }
:where(input[type="color"])::-webkit-color-swatch-wrapper { padding: 2px; }
:where(input[type="color"])::-webkit-color-swatch { border: none; border-radius: 3px; }
:where(input[type="color"])::-moz-color-swatch { border: none; border-radius: 3px; }

/* File pickers are hidden behind the paperclip / upload buttons; if one ever shows, it matches */
::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 10px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ui-box-border); background: var(--ui-box-bg); color: inherit;
}

/* Sliders and bars (none today): accent colour instead of browser blue */
:where(input[type="range"], progress, meter) { accent-color: var(--ui-accent); }