/* ---------- GENERIC FORM STYLES ---------- */

.form { /* wrapper */
  display: grid;
  gap: 16px;
  margin-top: 18px;
  text-align: left;
  justify-items: stretch;
}

.form-row { display: grid; gap: 8px; }

.form-row > :is(.form-input, .form-select, .form-button) {
  width: 100%;
}

.form-label {
  font-weight: 700;
  color: var(--muted-dark);
}
body.light-mode .form-label { color: var(--muted-light); }

.form-input,
.form-select {
  appearance: none;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-dark);
  background: #2b2b2b;
  color: var(--text-dark);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.form-input::placeholder { color: #8a8a8a; }

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.7),
    0 0 0 3px rgba(77, 182, 255, 0.22),
    0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Light mode fields */
body.light-mode .form-input,
body.light-mode .form-select {
  background: #ffffff;
  color: var(--text-light);
  border-color: var(--border-light);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

body.light-mode .form-input:focus,
body.light-mode .form-select:focus {
  border-color: var(--accent-light);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.08),
    0 0 0 3px rgba(0, 122, 204, 0.18);
}

/* File input tweak */
.form-input[type="file"] { padding: 10px 12px; }
.form-input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 12px;
  border: 1px solid #555;
  border-radius: 6px;
  background: #383838;
  color: var(--text-dark);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.form-input[type="file"]::file-selector-button:hover { background: #424242; }

body.light-mode .form-input[type="file"]::file-selector-button {
  background: #f5f5f5;
  border-color: var(--border-light);
  color: var(--text-light);
}
body.light-mode .form-input[type="file"]::file-selector-button:hover { background: #efefef; }

.form-help {
  font-size: 12px;
  color: #9a9a9a;
}
body.light-mode .form-help { color: #666; }

/* The box a form puts something a third party draws into, and the one thing it does is put that
   thing in the middle of the form instead of against its left edge.

   One declaration, and it is this one for a reason worth writing down, because two better-looking
   answers are worse. Laying the box out as a flex or a grid container would centre a block as well as
   an inline box - but both of those change the width of what is inside them, and the widget this
   exists for is measured at 300 pixels wide against a form that is 260 wide on a phone : a flex child
   is allowed to shrink below its own content, so on that width the answer somebody has to solve would
   be squashed instead of merely overhanging. A grid child would keep its width, but it also stops
   filling the box, and the element the supplier's script measures before deciding what to draw would
   then be zero pixels wide at the moment it is measured.

   Text alignment changes no box at all, which is what makes it safe here : it moves an inline box to
   the middle and, if what arrives is a block of fixed width, it leaves it exactly where it is today.
   The worst this can do is nothing. That is the right trade on the one form where a visitor who cannot
   answer the check cannot create an account at all. */
.form-embed {
  text-align: center;
}

.form-button {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background-color: #30444f;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease, transform 0.02s ease-in-out;
}
.form-button:hover { background-color: #344c57; }
.form-button:active { transform: translateY(1px); }

body.light-mode .form-button { background-color: #387da8; }
body.light-mode .form-button:hover { background-color: #558fb4; }

/* A button that cannot be pressed, drawn so on both themes.

   The state is the element's own and the colours only follow from it, which is the way round that
   matters : a button greyed by a colour and still pressable is a lie, and a button that is genuinely
   refused while looking exactly like the others is a page nobody can use. The disabled state is refused
   by the browser itself and announced by whatever reads the page out loud, and these two rules are what
   makes it visible to everyone else.

   The label is the same muted grey the palette already uses for the quieter text of a form, per theme,
   and only the two surfaces are new. Both were measured in a browser rather than picked : the label
   reads 5.16 to 1 against the dark surface and 5.50 to 1 against the light one, past the 4.5 ordinary
   text has to reach, and each surface is far enough from the pressable button's own to be told apart at
   a glance.

   They sit after the hover rules on purpose. A hover rule naming the theme class weighs exactly what a
   disabled rule naming the theme class weighs, so which of the two wins while a pointer rests on a
   disabled button is decided by which is written second - and a disabled button that lights up under
   the pointer invites the press it exists to prevent. */
.form-button:disabled {
  background-color: #29383f;
  color: var(--muted-dark);
  cursor: default;
}

body.light-mode .form-button:disabled {
  background-color: #cfe0ea;
  color: var(--muted-light);
}