/* Small overrides on top of Pico.css. Mobile first: Misha works from an iPhone. */

:root {
  --pico-font-size: 100%;
  --pico-form-element-spacing-vertical: 0.75rem;
}

header nav .logout-form {
  margin: 0;
}

header nav .logout-form button {
  margin: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.login-card {
  max-width: 26rem;
  margin: 2rem auto;
}

.error {
  color: var(--pico-del-color);
  font-weight: 600;
}

.message {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.message--error {
  border-left: 4px solid var(--pico-del-color);
}

.message--success {
  border-left: 4px solid var(--pico-ins-color);
}

/* Order status colours, matching the source Google Doc:
   red = problem, yellow = open task, green = received. */
.flag-problem { color: #b3261e; font-weight: 600; }
.flag-task    { color: #8a6d00; font-weight: 600; }
.flag-done    { color: #1b7f3b; font-weight: 600; }

/* Touch targets stay comfortable on a phone. */
@media (max-width: 640px) {
  button,
  [type="submit"],
  .button {
    min-height: 3rem;
    font-size: 1.05rem;
  }

  header nav ul {
    flex-wrap: wrap;
  }
}