/* The controls a customer types into, and the two places where Pico's defaults are wrong
 * for this product (T30.2).
 *
 * Pico gives every `select`, `input` and submit button the full width of its container,
 * which is right inside a form somebody is filling in and wrong for a control that lives
 * in a line of the header. That is the second defect the contact sheet of T30.1 measured:
 * on a phone the language switcher and the guest button took the whole first screen.
 *
 * Fixed by out-specifying Pico rather than by shouting at it: `.language-switcher select`
 * carries a class where Pico's rule carries only the element, so ours wins on its own
 * merit and keeps winning when Pico is upgraded. Nothing in this layer says `!important`
 * -- and the day something has to, it goes in this file and gets named in
 * `tests/unit/test_page_chrome_assets.py` with the reason beside it.
 */

/* --- Controls that live in a line, not in a form ------------------------------------ */
.language-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.language-switcher select,
.language-switcher button {
  width: auto;
  margin-bottom: 0;
}

/* The frame's own two ends. The guest door lives in one and the language switcher in the
 * other (T30.7), and neither is a form somebody is filling in: both are single controls
 * standing in a line of links. */
.site-header form,
.site-footer form {
  margin-bottom: 0;
}

.site-header button,
.site-header select,
.site-footer button,
.site-footer select {
  width: auto;
  margin-bottom: 0;
  padding-block: 0.4rem;
  font-size: 0.9rem;
}

/* --- Forms somebody is actually filling in ------------------------------------------- */

/* A field is as wide as what goes into it, not as wide as the window: an email box a
 * thousand pixels across says the answer should be long, and the sign-in page of this
 * product was exactly that. Pico's full width is kept -- it is what makes a field fill a
 * phone -- and capped. */
body > main input:not([type="checkbox"], [type="radio"]),
body > main select,
body > main textarea,
body > main form button[type="submit"] {
  max-width: 30rem;
}

form label {
  font-weight: 600;
}

/* What a field says when it was refused: allauth and Django both render `<ul class=
 * "errorlist">` next to the input, and left unstyled it reads as a bullet list of
 * sentences somewhere near the form rather than as this field's own answer. */
.errorlist {
  margin-bottom: 0.5rem;
  padding-left: 0;
  list-style: none;
  color: var(--pico-form-element-invalid-border-color);
  font-size: 0.9rem;
}

/* What the *form* was refused for, which belongs to no field of it: a wrong password, a
 * confirmation that did not match. Django renders it as the same `<ul>` above the first
 * field, and in the small red type above it read as a note somebody had left there rather
 * than as the answer to what had just been pressed. Drawn as a block, like every other
 * refusal of this product (`layout.css`), and in the warning colour: nothing is broken --
 * the two boxes simply do not go together. */
.errorlist.nonfield {
  padding: 0.75rem 1rem;
  border: 1px solid var(--hc-warning-border);
  border-left: 4px solid var(--pico-form-element-invalid-border-color);
  border-radius: var(--pico-border-radius);
  background-color: var(--hc-warning-background);
  color: var(--pico-color);
  font-size: 1rem;
}

/* The hint under a field, which Pico draws in the muted colour and no smaller. */
form small {
  font-size: 0.85rem;
}

/* The rules of a password, which Django writes as a list inside the hint under the field:
 * left as a list it is four bulleted lines of the first screen of a phone, on the page a
 * stranger is being asked to fill in. */
.helptext ul {
  margin-bottom: 0;
  padding-left: 0;
}

.helptext li {
  list-style: none;
}