/* Form fields, shared by sign-up, log-in, cardio, lift and account. */

.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.field textarea { min-height: 64px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.field .help { font-size: 11px; color: var(--muted); margin-top: 4px; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.errors {
  background: #fdecec;
  border-radius: 9px;
  padding: 10px 12px 10px 28px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--danger);
}
.errors li { margin-bottom: 2px; }
.errors li:last-child { margin-bottom: 0; }

.lastnote {
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}
.lastnote b { color: var(--ink); }

.formfoot { margin-top: 16px; }
.formfoot .btn + .btn, .formfoot .button_to { margin-top: 8px; }

/* --- the import screen's worked example --- */

/* A real file rather than a description of one. It scrolls on its own so a
   long header row never widens the page. */
pre.sample {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
  overflow-x: auto;
}
pre.sample b { color: var(--ink); font-weight: 700; }

ul.cols {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
}
ul.cols li { margin-bottom: 4px; }
ul.cols code {
  font-size: 11.5px;
  color: var(--ink);
  background: #f0f1f4;
  border-radius: 5px;
  padding: 1px 5px;
  margin-right: 4px;
}