/* Focused account and short Studio form layouts. */
.login-help p + p { margin-top: .65rem; }

.studio-short-form,
.studio-grant-form,
.studio-compact-form {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
}
.studio-compact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  min-width: 0;
  margin: 0;
}
.studio-field-wide { grid-column: 1 / -1; }
.studio-short-form > .errorlist,
.studio-grant-form > .errorlist,
.studio-compact-form > .errorlist { margin: 0; grid-column: 1 / -1; }
.studio-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.studio-field > label {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-control);
}
.studio-field-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.studio-field-control > input,
.studio-field-control > select,
.studio-field-control > textarea {
  min-width: 0;
  max-width: 100%;
}
.studio-field-control > :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], select) {
  width: 100%;
}
.studio-field-control > input[type="number"] { width: 8em; }
.studio-field-control > textarea { width: 100%; }
.studio-field-control.studio-field-has-unit { flex-wrap: nowrap; }
.studio-choice-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-weight: var(--weight-normal);
}
.studio-choice-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: .35em 0 0;
}
.studio-checkbox-list label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}
.studio-checkbox-list input[type="checkbox"] { flex: 0 0 auto; margin-top: .35em; }
.studio-field-unit {
  color: var(--muted);
  font-size: var(--text-small);
  white-space: nowrap;
}
.studio-field-help {
  display: block;
  color: var(--muted);
  font-size: var(--text-meta);
  line-height: var(--leading-note);
  overflow-wrap: anywhere;
}
.studio-field .errorlist,
.studio-short-form > .errorlist,
.studio-grant-form > .errorlist {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--text-meta);
  line-height: var(--leading-note);
  overflow-wrap: anywhere;
}
.studio-short-form input[type="text"],
.studio-short-form input[type="email"],
.studio-short-form input[type="url"],
.studio-short-form textarea,
.studio-grant-form input[type="email"],
.studio-grant-form input[type="text"] {
  width: 100%;
}
.studio-short-form input[type="number"],
.studio-grant-form input[type="number"] {
  width: 8em;
}
.studio-short-form input[name="delay_hours"] { width: 7em; }
.studio-short-form input[name="chapter_reward"],
.studio-short-form input[name="comment_reward"],
.studio-short-form input[name="chapter_price"] { width: 7em; }
.studio-grant-form input[name="amount"] { width: 8em; }
.studio-grant-form textarea { width: 100%; }
.studio-form-group {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.studio-form-group legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
}
.studio-rule-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
.studio-rule-form .studio-form-group {
  align-content: start;
  align-self: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.studio-rule-form .studio-rule-rewards {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.studio-rule-form .studio-form-group legend {
  grid-column: 1 / -1;
  padding: 0;
  color: var(--muted);
  font-weight: var(--weight-medium);
}
.studio-rule-form .studio-field {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
}
.studio-rule-form .studio-field > label {
  grid-column: 1;
  grid-row: 1;
  overflow-wrap: anywhere;
}
.studio-rule-form .studio-field-control {
  grid-column: 2;
  grid-row: 1;
  flex-wrap: nowrap;
  gap: 5px;
}
.studio-rule-form .studio-field .errorlist,
.studio-rule-form .studio-field-help,
.studio-rule-form .studio-form-actions {
  grid-column: 1 / -1;
}
.studio-rule-form .studio-field-unit { min-width: 2em; }
.studio-rule-form .studio-field-help {
  margin-top: 0;
}
.studio-rule-form > .errorlist {
  grid-column: 1 / -1;
}
.studio-rule-form .studio-form-actions {
  margin-top: 4px;
}
.studio-form-actions { grid-column: 1 / -1; margin: 0; }
.studio-grant-form .studio-form-actions { margin-top: 2px; }

.studio-grant-form .studio-field-wide { grid-column: 1 / -1; }

.account-form-card { max-width: 520px; margin: 30px auto; }
.account-form .studio-field-control > input { width: 100%; }
.account-form > .errorlist { grid-column: 1 / -1; margin: 0; }
.account-form .studio-field-help { grid-column: 1 / -1; }

.studio-compact-form > p,
.studio-compact-form > .studio-field { min-width: 0; margin: 0; }
.studio-compact-form .studio-field-help,
.studio-compact-form .studio-field .errorlist { overflow-wrap: anywhere; }

@media(max-width: 720px) {
  .studio-compact-form { grid-template-columns: minmax(0, 1fr); }
  .studio-rule-form { grid-template-columns: minmax(0, 1fr); }
  .studio-rule-form .studio-rule-rewards { grid-template-columns: minmax(0, 1fr); }
  .studio-rule-form .studio-form-actions { grid-column: 1; }
}

@media(max-width: 380px) {
  .studio-form-group { padding-inline: 10px; }
  .studio-field-control { gap: 6px; }
  .studio-form-actions > * { flex: 1 1 auto; }
}