/* controls.css — cross-platform normalisation for form controls + scrollbars.

   WHY THIS FILE EXISTS
   Two categories of UI are drawn by the PLATFORM rather than by our CSS, so they
   looked different on iPhone vs Android vs Windows vs Firefox no matter what the
   page said:

     1. Native form controls. A bare <select> renders as an iOS pill with a
        system chevron, a Material box on Android, and something else again on
        Windows. Checkboxes are iOS-blue rounded squares vs Android's Material
        tick. `accent-color` only recolours them — the SHAPE stays native.
     2. Scrollbars. The app styles ::-webkit-scrollbar, which Chrome, Edge and
        Safari honour and Firefox ignores completely, so Firefox users saw
        default OS scrollbars in an otherwise custom UI.

   The fix in both cases is the same as for the icon glyphs: replace anything the
   platform draws with geometry we own. `appearance: none` hands us the box, then
   we draw it.

   Loaded by every page that has form controls: app, admin, engine, files, login,
   signup, contact. The universal bits are mirrored in site.css so the marketing
   pages get them too.

   NOTE the fallbacks in every var() — engine.html and app.html don't all load
   colors_and_type.css, so each custom property needs a literal default. */

/* ── Universal ─────────────────────────────────────────────────────────────── */
html {
  /* iOS inflates text in landscape unless this is pinned. Android never does,
     so without it the same page has different type sizes per platform. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Firefox parity for the ::-webkit-scrollbar rules elsewhere. Both properties
     are INHERITED, so setting them here reaches every scroll container without
     a universal selector. `thin` (~8-11px) is the closest match to our webkit
     thumb, which is 14px wide minus a 3px border on each side. */
  scrollbar-width: thin;
  scrollbar-color: #c0c5ca transparent;
}

/* iOS paints a grey box over any tapped element; no other platform does. */
a, button, label, select, summary,
input[type="checkbox"], input[type="radio"], [role="button"], [onclick] {
  -webkit-tap-highlight-color: transparent;
}

/* Controls default to the SYSTEM UI font, not the page font, on every platform. */
input, textarea, select, button { font-family: inherit; }

/* ── Text inputs and textareas ─────────────────────────────────────────────── */
/* appearance:none is what removes iOS's inner shadow and its forced corner
   radius on search/date/email fields. Deliberately excludes the types whose
   appearance IS their function — a file input needs its button, a range needs
   its track. Pages keep defining their own border/radius/padding; this only
   strips the platform layer underneath. */
/* Kept on ONE line on purpose: a line break inside a compound selector is
   whitespace, which CSS reads as a descendant combinator — it would silently
   become `input:not(...) :not(...)` and match the wrong elements. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
textarea {
  -webkit-appearance: none;
  appearance: none;
  /* Safari leaks the background out past a rounded border without this. */
  background-clip: padding-box;
}

/* iOS renders a clear "X" and native decoration inside search fields. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; }

/* Number spinners are drawn natively and differ per platform. The admin panel's
   number fields are typed into, never spun. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Placeholder colour is a platform default (iOS is notably lighter). */
input::placeholder, textarea::placeholder { color: var(--sp-gray-500, #8e959c); opacity: 1; }

/* ── Select ────────────────────────────────────────────────────────────────── */
/* Strips the native control and supplies our own chevron as a background image,
   so no markup change is needed. Pages that already draw their own caret
   (contact.html has an SVG sibling, files.html its own data-URI) set a
   `background` shorthand of their own, which suppresses this one — that is why
   they don't end up with two arrows. */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23777' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-clip: padding-box;
  cursor: pointer;
}
/* Firefox keeps a focus inner-outline on select; Chrome does not. */
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--sp-gray-900, #1b1f23); }

/* ── Checkbox and radio ────────────────────────────────────────────────────── */
/* Fully drawn by us. inline-grid + place-content centres the tick without magic
   numbers, and the tick itself is two borders rotated 45deg — geometry, so it
   cannot vary by platform the way a ✓ character did. */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 16px; height: 16px;
  margin: 0; flex-shrink: 0;
  border: 1.5px solid var(--sp-gray-400, #c4c8cc);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .12s, border-color .12s;
}
input[type="radio"] { border-radius: 50%; }

/* Give the `hidden` attribute back its meaning.
   The rule above sets `display` on EVERY checkbox and radio, and an author rule
   beats the UA sheet's `[hidden] { display: none }` whatever the specificity —
   so `hidden` silently stopped hiding them app-wide. It showed up as a stray
   16px box beside the "Where it lands" cards in the extract modal: #um-inline
   is a pure state holder the JS reads, marked hidden + aria-hidden, and it was
   being painted anyway. Scoped to these two controls because they are the only
   ones the rule above touches. */
input[type="checkbox"][hidden], input[type="radio"][hidden] { display: none; }

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) { border-color: var(--sp-gray-500, #8e959c); }

input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--sp-green-700, #2d6a4f);
  border-color: var(--sp-green-700, #2d6a4f);
}

input[type="checkbox"]:checked::after {
  content: "";
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
}
input[type="radio"]:checked::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}

input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  background: var(--sp-gray-100, #f0f1f3);
  border-color: var(--sp-gray-300, #d7dbdf);
  cursor: not-allowed;
}

/* Our custom box has no native focus ring, so give it one back. Keyboard users
   only — :focus-visible keeps it off mouse clicks. */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sp-green-700, #2d6a4f);
  outline-offset: 2px;
}

/* Same guard as site.css, for the pages that load controls.css instead
   (app, admin, engine, files, login, signup, contact). Duplicated rather than
   shared because these two sheets are never both on one page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}