/* BioCraftEd is blocky. No rounded corners anywhere in the OS.
 * Every page links this after its own styles. It is the safety net for corners
 * the browser rounds on its own (Safari rounds selects, search boxes and buttons
 * unless their native look is switched off), and for any border-radius that
 * slips back into an app's CSS. Don't add rounded corners — draw it square. */
*, *::before, *::after { border-radius: 0 !important; }

/* Safari/iOS draw these natively with round corners; turn the native look off. */
select, button, textarea,
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="tel"], input[type="date"],
input[type="submit"], input[type="button"], input[type="reset"], input:not([type]) {
  -webkit-appearance: none; appearance: none;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* With the native look off a select loses its arrow, so draw a square one. */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h9v1H0zM1 1h7v1H1zM2 2h5v1H2zM3 3h3v1H3zM4 4h1v1H4z' fill='%23000'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  padding-right: 20px !important;
}
select[multiple], select[size]:not([size="1"]) { background-image: none !important; padding-right: 4px !important; }