/* Inputs, fields and fieldsets. */

@layer base {
  input, select, textarea {
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    margin: 0;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 3px var(--soft);
  }
  input:disabled {
    background: var(--soft);
    color: #aaa;
    border-color: #cfcfcf;
  }
  input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--ink);
    vertical-align: -0.15rem;
  }

  input[type="text"], input[type="password"], input[type="email"],
  input[type="date"], input[type="datetime-local"], textarea, select {
    width: 100%;
  }
  input[type="file"] { width: 100%; border-style: dashed; }

  .form { max-width: 40rem; }
  .field {
    margin-bottom: 1.1rem;

    label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
    input[type="checkbox"] + label {
      display: inline;
      font-weight: 600;
      margin-left: 0.35rem;
    }
  }
  /* A field's label when it isn't a <label> (a group of controls). */
  .field-label { font-weight: 700; margin: 0 0 0.3rem; }
  .field-hint { display: block; margin-top: 0.35rem; }

  fieldset {
    border: 2px solid var(--line);
    border-radius: var(--radius-box);
    padding: 1rem 1.2rem 1.2rem;
    margin: 0 0 1.25rem;
  }
  legend { font-weight: 800; padding: 0 0.4rem; }
}