/* SchoolDay v231. */

/* --- Games Settings: three sub-tabs -------------------------------------
   v230 kept the shared sounds in a <details> above the tabs. v231 makes them
   the first tab, so the panel has one way of putting something away instead
   of two, and neither game tab is pushed down the page. The v230 rule for
   that block stays in admin-v230.css and is simply no longer matched -- it is
   left there rather than deleted so an older cached admin.js still renders
   correctly during the minutes after a deploy. */
.game-settings-lead-v231 {
  margin: 0 0 .8rem;
}

/* --- The club colour swatch ---------------------------------------------
   An <input type="color"> with no rule renders as the browser's default,
   which in Chrome is a wide, short bar with a thin strip of colour in it --
   Sean's "line". Everywhere else in SchoolDay a colour input is a square
   swatch (see .feedback-colour-row and .phonics-output-colour-row), so this
   is the same treatment, not a new one.

   appearance:none is what allows the width and height to apply at all; the
   ::-webkit-color-swatch and ::-moz-color-swatch rules remove the inner
   border so the whole square is the chosen colour rather than a colour with
   a grey frame around it. */
#clubColourV225 {
  appearance: none;
  -webkit-appearance: none;
  width: 46px !important;
  height: 46px !important;
  min-height: 0;
  padding: 2px;
  border: 2px solid rgba(20, 79, 140, .25);
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
}
#clubColourV225::-webkit-color-swatch-wrapper { padding: 0; }
#clubColourV225::-webkit-color-swatch { border: 0; border-radius: .35rem; }
#clubColourV225::-moz-color-swatch { border: 0; border-radius: .35rem; }
/* The label stacks so the square sits under the word rather than being
   stretched to the width of the field beside it. */
.club-form-v225 label:has(#clubColourV225),
label:has(#clubColourV225) {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
}