*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--m-font);
  font-size: var(--m-font-size);
  line-height: 1.5;
  color: var(--m-fg);
  background: var(--m-bg);
  -webkit-font-smoothing: antialiased;
}
/* !important: Alpine sets display inline through x-show; hidden content must stay hidden */
[x-cloak] { display: none !important; }
[hidden] { display: none !important; }
a { color: var(--m-primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--m-fg-strong); font-weight: 600; line-height: 1.25; margin: 0; }
h1 { font-size: var(--m-font-size-2xl); }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 calc(var(--m-space) * 3); }
small { font-size: var(--m-font-size-sm); }
img, svg { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; }
:focus-visible { outline: none; box-shadow: var(--m-focus); border-radius: var(--m-radius); }

/* Native form controls get the theme look everywhere, including Django's own forms. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"]),
select, textarea {
  font: inherit;
  color: var(--m-fg-strong);
  background: var(--m-surface);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--m-radius);
  padding: calc(var(--m-space) * 2) calc(var(--m-space) * 3);
  min-height: 2.5rem;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
/* The chevron is drawn with two gradient tiles in the muted text colour (a 10x5 triangle, the
   same as the old SVG) so it follows dark mode; a form control cannot carry a mask or a
   pseudo-element, and an SVG data URI cannot read custom properties. */
select { padding-right: 2.25rem; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--m-fg-muted) 50%), linear-gradient(135deg, var(--m-fg-muted) 50%, transparent 50%); background-repeat: no-repeat; background-size: 5px 5px; background-position: right calc(.75rem + 6px) center, right calc(.75rem + 1px) center; }
select[multiple] { background-image: none; padding-right: calc(var(--m-space) * 3); }
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--m-primary); box-shadow: var(--m-focus); outline: none; }
/* Search inputs: the browser's own clear button would duplicate ours (search-field__clear) */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--m-primary); margin: 0; vertical-align: middle; }
input[type="color"] { min-height: 2.5rem; width: 3.5rem; padding: 2px; border: 1px solid var(--m-border-strong); border-radius: var(--m-radius); background: var(--m-surface); }
::placeholder { color: var(--m-fg-muted); opacity: .8; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
label { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--m-border); margin: calc(var(--m-space) * 4) 0; }

.hidden { display: none !important; }  /* !important: beats x-show inline display and component display rules */

/* iOS zooms into any field smaller than 16px on focus: keep fields at 16px on touch screens
   (!important: wins over every component font size, ours or a third party's) */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea, .combobox__input, .search-field input { font-size: 16px !important; }
}