:root {
  --wd-wood: #6b4f3a;
  --wd-wood-dark: #4e3929;
  --wd-wood-light: #f5efe8;
}

html { font-size: 16px; }

body { background: #faf8f5; }

.wd-navbar { background: var(--wd-wood); }

.btn-primary {
  --bs-btn-bg: var(--wd-wood);
  --bs-btn-border-color: var(--wd-wood);
  --bs-btn-hover-bg: var(--wd-wood-dark);
  --bs-btn-hover-border-color: var(--wd-wood-dark);
  --bs-btn-active-bg: var(--wd-wood-dark);
  --bs-btn-active-border-color: var(--wd-wood-dark);
  --bs-btn-disabled-bg: var(--wd-wood);
  --bs-btn-disabled-border-color: var(--wd-wood);
}

.btn-outline-primary {
  --bs-btn-color: var(--wd-wood);
  --bs-btn-border-color: var(--wd-wood);
  --bs-btn-hover-bg: var(--wd-wood);
  --bs-btn-hover-border-color: var(--wd-wood);
  --bs-btn-active-bg: var(--wd-wood);
  --bs-btn-active-border-color: var(--wd-wood);
}

.btn-check:checked + .btn-outline-primary { background: var(--wd-wood); border-color: var(--wd-wood); color: #fff; }

a { color: var(--wd-wood); }

/* Large tap targets on touch screens */
.btn, .form-control, .form-select { min-height: 44px; }
.btn-sm { min-height: 36px; }

.form-control:focus, .form-select:focus, .btn:focus-visible, .form-check-input:focus {
  border-color: var(--wd-wood);
  box-shadow: 0 0 0 0.2rem rgba(107, 79, 58, .3);
}

/* Piece cards */
.wd-thumb {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  background: var(--wd-wood-light);
}
.wd-thumb-placeholder {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--wd-wood-light);
}
.wd-list-thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: .375rem; overflow: hidden; }
.wd-list-thumb .wd-thumb-placeholder { font-size: 1.5rem; height: 64px; }
.wd-card-link { color: inherit; text-decoration: none; }
.wd-card-link:hover .card, .wd-card-link:focus .card { border-color: var(--wd-wood); }
/* A form button that looks like a link card (e.g. "Try the demo") */
.wd-card-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; text-align: start; }
.wd-card-button:focus-visible { outline: none; }
.wd-card-button:focus-visible .card { border-color: var(--wd-wood); box-shadow: 0 0 0 .2rem rgba(107, 79, 58, .3); }

.wd-stat { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .6rem .75rem; height: 100%; }
.wd-stat-label { font-size: .8rem; color: var(--bs-secondary-color); }
.wd-stat-value { font-size: 1.15rem; font-weight: 600; }

.wd-piece-image { max-height: 60vh; width: 100%; object-fit: contain; background: var(--wd-wood-light); border-radius: .5rem; }

/* Sticky action button at the bottom of the screen on phones */
.wd-sticky-action {
  position: sticky;
  bottom: 0;
  padding: .75rem 0;
  background: linear-gradient(to top, #faf8f5 70%, rgba(250, 248, 245, 0));
  z-index: 10;
}

.wd-chart { position: relative; height: 280px; }

/* Date pickers (flatpickr) in the site's colours */
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: var(--wd-wood);
  border-color: var(--wd-wood);
}
.flatpickr-day.today { border-color: var(--wd-wood); }
.flatpickr-calendar { font-family: inherit; }

/* Toggle buttons whose text changes with Bootstrap's collapse state */
.wd-toggle.collapsed .wd-when-open, .wd-toggle:not(.collapsed) .wd-when-closed { display: none; }

/* The section for the visitor's own device on the help page */
.wd-highlight { border-color: var(--wd-wood); box-shadow: 0 0 0 1px var(--wd-wood); }

/* The ☰ menu button in the navbar */
.wd-menu-button {
  border: 1px solid rgba(255, 255, 255, .35);
  padding: .35rem .6rem;
  min-height: 44px;
  min-width: 44px;
}
.wd-menu-button:hover, .wd-menu-button[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.wd-menu-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }