_static/custom.css

/* Accessibility & readability tweaks for oTree pages */

html, body {
  font-size: 18px; /* larger base for readability */
  line-height: 1.5;
}

.container, .otree-body {
  max-width: 900px;
}

/* Buttons */
.btn, button, input[type=submit] {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border-radius: 6px;
}

.btn-primary {
  background-color: #0a58ca; /* higher contrast */
  border-color: #0a58ca;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #084298;
  border-color: #084298;
}

/* Inputs */
input[type=number], input[type=text], textarea, select {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

/* Focus visibility */
a:focus, button:focus, .btn:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid #ffbf47; /* distinct focus ring */
  outline-offset: 2px;
}

/* Cards spacing */
.card.bg-light.m-3 .card-body { font-size: 0.98rem; }

/* Lists in instructions */
ul { margin-top: 0.25rem; }
li { margin-bottom: 0.25rem; }