/* Brand palette, sampled from the avatar artwork rather than eyeballed. */
:root {
  --sc-navy: #1B2A4A;
  --sc-cream: #F4EFE7;
  --sc-green: #16C79A;
  --sc-orange: #FF5A3C;
}

body { font-family: system-ui, -apple-system, sans-serif; }

/* Bootstrap's bg-dark is #212529, which leaves a visible seam around the
   logo's circle. This is the navy out of the artwork itself. */
.sc-navbar { background-color: var(--sc-navy); }
.navbar-brand img { display: block; }

/* Selected teams pick up the orange from the wordmark. */
.btn-check:checked + .btn {
  border-color: var(--sc-orange);
  box-shadow: inset 0 0 0 1px var(--sc-orange);
}

/* Collapsed league drawers. Native <details> so the picker needs no JS. */
.league > summary { cursor: pointer; list-style: none; border-bottom: 1px solid var(--bs-border-color); }
.league > summary::-webkit-details-marker { display: none; }
.league > summary::before { content: "\25B8"; margin-right: .5rem; color: var(--bs-secondary-color); }
.league[open] > summary::before { content: "\25BE"; }

/* The sample DM sits in a box sized to the message rather than the column,
   so it reads like a message rather than a page section. */
.sc-sample { display: inline-block; max-width: 100%; }
.sc-sample pre { overflow-x: auto; }