:root {
  --good: #1f9d55;
  --warn: #d69e2e;
  --bad: #d64545;
}

body {
  padding-bottom: 3rem;
}

.app-header {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.muted {
  opacity: 0.75;
}

.top-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.top-nav .active {
  outline: 2px solid var(--pico-primary);
}

.stats-grid {
  gap: 0.5rem;
}

.bars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.bar-item {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  background: rgba(127, 127, 127, 0.12);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.kana {
  font-size: 1.1rem;
  margin-right: 0.25rem;
}

.row-buttons,
.cards-grid,
.option-grid {
  display: grid;
  gap: 0.5rem;
}

.row-action-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.cards-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.kana-card {
  margin: 0;
}

.quiz-card {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.75rem;
  padding: 1rem;
}

.quiz-kana {
  font-size: 2.25rem;
  text-align: center;
  margin: 0.5rem 0 1rem;
}

.counter {
  margin-bottom: 0.5rem;
}

.status-green {
  color: var(--good);
}

.status-yellow {
  color: var(--warn);
}

.status-red {
  color: var(--bad);
}

.onboarding-card {
  border: 1px solid var(--pico-primary-border);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--pico-primary-background) 30%, transparent);
}

@media (min-width: 700px) {
  .top-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bars-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}