/* Two colours sampled from the C-YA! Rongai flier: its deep blue background
   and its yellow. Templates use them through Tailwind arbitrary values, e.g.
   bg-[color:var(--brand)], so they work with any Tailwind version. */
:root {
  --brand: #024561;       /* flier blue: white text 10.4:1 */
  --brand-dark: #02334c;  /* flier's darkest blue, for hover */
  --brand-ring: #7fbfd3;  /* focus rings */
  --brand-line: #b9d8e2;
  --brand-soft: #e8f2f6;
  --accent: #ffdf01;      /* flier yellow: fills only, with --brand text (7.8:1) */
}
body { font-family: Roboto, Arial, sans-serif; background-color: #f3f7f9; }
.shake { animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
/* Dropdowns: replace the native look with a white box and our own chevron.
   Kept here rather than in Tailwind classes so it holds if the CDN fails. */
select.chevron {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  color: #111827;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd' fill='%236B7280'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
}
/* Grey "Select …" placeholder while the empty option is chosen. */
select.chevron:has(option[value=""]:checked) { color: #9ca3af; }
select.chevron option { color: #111827; }