/* Interactive components: buttons, fields, code entry, choices, badges,
   notices. Nothing here knows about page layout, so both the marketing site
   and the shop load it as-is. */

/* --- Buttons -------------------------------------------------------------
   Sharp rectangles. State is carried by fill density and shadow depth only:
   nothing shifts position or changes size when hovered or pressed. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: var(--control-border) solid transparent;
  border-radius: 0;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tempo) var(--ease),
    box-shadow var(--tempo) var(--ease),
    border-color var(--tempo) var(--ease), color var(--tempo) var(--ease);

  &:disabled,
  &[aria-disabled="true"] {
    cursor: not-allowed;
    background: var(--plate-disabled);
    border-color: transparent;
    color: var(--text-muted);
    box-shadow: none;
  }

  &.button--primary {
    background: var(--orange);
    color: var(--cream);
    box-shadow: var(--lift-primary);

    &:hover:not(:disabled) {
      background: var(--orange-hover);
      box-shadow: var(--lift-primary-hover);
    }

    &:active:not(:disabled) {
      background: var(--orange-press);
      box-shadow: var(--lift-primary-press);
    }
  }

  &.button--secondary {
    background: var(--ink);
    color: var(--sand);
    box-shadow: var(--lift-secondary);

    &:hover:not(:disabled) {
      background: var(--ink-hover);
      box-shadow: var(--lift-secondary-hover);
    }

    &:active:not(:disabled) {
      background: var(--ink-press);
      box-shadow: var(--lift-secondary-press);
    }
  }

  &.button--quiet {
    background: var(--paper);
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: var(--lift-quiet);

    &:hover:not(:disabled) {
      background: var(--cream);
      box-shadow: var(--lift-quiet-hover);
    }

    &:active:not(:disabled) {
      background: var(--sand-press);
      box-shadow: var(--lift-quiet-press);
    }
  }

  &.button--destructive {
    background: var(--paper);
    border-color: var(--orange-deep);
    color: var(--orange-deep);
    box-shadow: var(--lift-destructive);

    &:hover:not(:disabled) {
      background: var(--orange-wash);
      box-shadow: var(--lift-destructive-hover);
    }

    &:active:not(:disabled) {
      background: var(--orange-wash-press);
      box-shadow: var(--lift-destructive-press);
    }
  }
}

/* --- Form fields ---------------------------------------------------------
   A flat white plate with a hairline ink border means you type in it.
   Focus changes the border colour only — never the size or the position. */

.field {
  display: grid;
  gap: 0.5625rem;
}

.field-label {
  font-family: var(--font-label);
  font-size: var(--step-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field-control,
.field-affixed {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--control-height);
  padding: 0 1rem;
  background: var(--paper);
  border: var(--control-border) solid var(--ink);
  border-radius: 0;
  font-family: var(--font-label);
  font-size: var(--step-ui);
  color: var(--ink);
  transition: border-color var(--tempo) var(--ease);
}

input.field-control,
select.field-control,
textarea.field-control {
  width: 100%;
  appearance: none;

  &::placeholder {
    color: var(--text-placeholder);
  }

  &:focus {
    outline: none;
    border-color: var(--orange);
  }

  &:disabled {
    background: var(--plate-muted);
    border-color: var(--line-muted);
    color: var(--text-muted);
    cursor: not-allowed;
  }
}

textarea.field-control {
  height: auto;
  min-height: 7.5rem;
  padding: 0.75rem 1rem;
  line-height: var(--leading-control);
  resize: vertical;
}

select.field-control {
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
}

/* A prefix that is part of the field, not a badge floating beside it */
.field-affixed {
  padding: 0;

  &:focus-within {
    border-color: var(--orange);
  }

  & .field-prefix {
    padding-left: 1rem;
    font-family: var(--font-mono);
    color: var(--text-placeholder);
  }

  & input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 1rem 0 0;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: var(--step-ui);
    color: var(--ink);

    &:focus {
      outline: none;
    }
  }
}

.field-hint {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-small);
  line-height: var(--leading-ui);
  color: var(--ink-soft);
}

.field--error {
  & .field-control {
    border-color: var(--orange-deep);
  }

  & .field-hint {
    color: var(--orange-deep);
  }
}

/* --- Code entry ----------------------------------------------------------
   Nine boxes in three groups — the code is easier to read back from the
   email that way. Pasting fills all nine. */

.code-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.code-group {
  display: flex;
  gap: 0.375rem;
}

.code-box {
  width: 2.625rem;
  height: 3.375rem;
  padding: 0;
  background: var(--paper);
  border: var(--control-border) solid var(--ink);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  text-align: center;
  color: var(--ink);
  appearance: none;

  &:focus {
    outline: none;
    border-color: var(--orange);
    caret-color: var(--orange);
  }
}

/* --- Choices -------------------------------------------------------------
   Native controls, restyled. Square for checkbox, round for radio — the
   only circle in the system, because that distinction is worth keeping. */

.choice-list {
  display: grid;
  gap: 1.125rem;
}

.choice {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  line-height: var(--leading-snug);

  & input {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    background: var(--paper);
    border: var(--control-border) solid var(--ink);
    appearance: none;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background-color var(--tempo) var(--ease),
      border-color var(--tempo) var(--ease);
  }

  & input[type="checkbox"] {
    border-radius: 0;

    &::before {
      content: "";
      width: 0.75rem;
      height: 0.4375rem;
      border-left: 2px solid var(--cream);
      border-bottom: 2px solid var(--cream);
      rotate: -45deg;
      translate: 0 -0.09rem;
      scale: 0;
      transition: scale var(--tempo) var(--ease);
    }

    &:checked {
      background: var(--ink);

      &::before {
        scale: 1;
      }
    }
  }

  & input[type="radio"] {
    border-radius: 50%;

    &::before {
      content: "";
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 50%;
      background: var(--ink);
      scale: 0;
      transition: scale var(--tempo) var(--ease);
    }

    &:checked::before {
      scale: 1;
    }
  }

  &:has(input:disabled) {
    color: var(--text-muted);
    cursor: not-allowed;

    & input {
      background: var(--plate-muted);
      border-color: var(--line-muted);
      cursor: not-allowed;
    }
  }
}

/* --- Status badges -------------------------------------------------------
   Square, not rounded: a pill would be the only soft corner in the system.
   Four densities, mapped by meaning rather than by hue. */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.5625rem;
  border: var(--control-border) solid transparent;
  border-radius: 0;
  font-family: var(--font-label);
  font-size: var(--step-badge);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;

  /* Settled and current — the state you hope to see */
  &.badge--solid {
    background: var(--ink);
    color: var(--cream);
  }

  /* Wants something from you. Used sparingly. */
  &.badge--attention {
    background: var(--orange);
    color: var(--cream);
  }

  /* Waiting on us, not on you */
  &.badge--outline {
    border-color: var(--ink);
    color: var(--ink);
  }

  /* Over. Still on the record, no longer in play. */
  &.badge--ghost {
    border-color: color-mix(in srgb, var(--ink) 20%, transparent);
    color: color-mix(in srgb, var(--ink) 50%, transparent);
  }
}

/* --- Notices -------------------------------------------------------------
   One band for every flash — notice, alert, error alike. No coloured
   prefix and no icon vocabulary: the sentence carries the meaning. */

.notice {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.9375rem 1.25rem;
  background: var(--ink);
  color: var(--cream);
  line-height: var(--leading-ui);

  & p {
    margin: 0;
    flex: 1;
  }

  & a {
    color: var(--orange-tint);
  }
}

.notice-dismiss {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  border: 0;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
  cursor: pointer;
  display: grid;
  place-content: center;

  &:hover {
    color: var(--cream);
  }

  &::before {
    content: "×";
    font-size: 1.25rem;
    line-height: 1;
  }
}