/* SchoolDay v230. */

/* --- Games Settings: Phonics and Maths ----------------------------------
   The shared sounds sit above the tabs because they belong to neither game.
   A <details> so a school that has set its music once can fold it away and
   get straight to the tab it came for. */
.game-shared-sounds-v230 {
  margin: .8rem 0 1rem;
  padding: .6rem .8rem;
  border: 1px solid #d5e1eb;
  border-radius: .7rem;
  background: #f8fbfd;
}
.game-shared-sounds-v230 > summary { cursor: pointer; padding: .2rem 0; }
.game-settings-tabs-v230 { margin-bottom: 1rem; }
.game-settings-panel-v230.hidden { display: none !important; }

/* --- The maths settings ------------------------------------------------- */
.maths-settings-v229 > h4 {
  margin: 1.4rem 0 .3rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: 1rem;
}
.maths-settings-v229 > h4:first-child { margin-top: .2rem; }

.maths-game-cards-v230 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .7rem;
  margin: .6rem 0 .2rem;
}
.maths-game-card-v230 {
  padding: .8rem;
  border: 1px solid #cbd9e5;
  border-radius: .7rem;
  background: #fff;
}
.maths-game-card-v230 h5 { margin: 0 0 .25rem; font-size: .95rem; }
.maths-game-card-v230 p { margin: 0 0 .45rem; font-size: .82rem; }

/* Five across, which for 1 to 20 is four rows. Zero is the standalone tile
   above, so the grid is exactly the twenty it was asked for. It drops to
   fewer columns on a narrow screen rather than scrolling sideways. */
.maths-number-grid-v230 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
  margin: .5rem 0 .2rem;
}
.maths-number-tile-v230 {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .5rem;
  border: 1px solid #cbd9e5;
  border-radius: .6rem;
  background: #fff;
}
.maths-number-tile-v230.is-recorded-v230 { border-color: #34a05a; background: #f4fbf6; }
.maths-number-tile-v230.is-standalone-v230 {
  max-width: 14rem;
  margin: .5rem 0;
  border-style: dashed;
}
.maths-number-head-v230 { display: flex; align-items: baseline; gap: .4rem; }
.maths-number-digit-v229 { font-size: 1.5rem; font-weight: 800; color: #0f3d6b; line-height: 1; }
.maths-number-word-v229 { font-size: .78rem; color: #5b7185; }
.maths-number-state-v230 { margin: 0; font-size: .72rem; color: #5b7185; }
.is-recorded-v230 .maths-number-state-v230 { color: #2f7d4c; font-weight: 600; }
.maths-number-tile-v230 audio { width: 100%; height: 2rem; }
.maths-number-actions-v230 { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: auto; }
.maths-number-actions-v230 > button,
.maths-number-hear-v230 {
  padding: .22rem .45rem !important;
  font-size: .72rem !important;
  min-height: 0 !important;
}
/* The file input is hidden behind its own label, which is the only part that
   should look like a control. */
.maths-number-upload-v229 {
  display: inline-flex;
  align-items: center;
  padding: .22rem .45rem;
  border: 1px solid #cbd9e5;
  border-radius: .35rem;
  background: #f6f9fb;
  font-size: .72rem;
  cursor: pointer;
}
.maths-number-upload-v229 input { display: none; }
.maths-number-count-v230 { font-weight: 600; }
.maths-speech-toggle-v230 { display: flex; align-items: center; gap: .45rem; margin: .6rem 0; }
.maths-speech-toggle-v230 input { width: auto; margin: 0; }
.maths-effect-toggles-v229 { display: flex; flex-wrap: wrap; gap: .8rem; margin: .5rem 0; }
.maths-effect-toggles-v229 label { display: flex; align-items: center; gap: .35rem; margin: 0; }
.maths-effect-toggles-v229 input { width: auto; margin: 0; }
/* NOT sticky. It was, so that Save stayed reachable without scrolling back up
   a page of twenty tiles -- but a bar pinned to the bottom of the viewport sits
   on top of four of those tiles while you are working on them, which is worse
   than the scroll it saves. The browser showed that; reading the CSS would not
   have. */
.maths-save-bar-v230 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.2rem;
  padding-top: .8rem;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 1100px) {
  .maths-number-grid-v230 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .maths-number-grid-v230 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .maths-number-grid-v230 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- The bulk homework game picker -------------------------------------- */
.maths-game-picker-v229 {
  margin: .8rem 0 .2rem;
  padding: .6rem .8rem;
  border: 1px solid #cbd9e5;
  border-radius: .6rem;
}
.maths-game-picker-v229 > legend { padding: 0 .3rem; font-weight: 600; font-size: .85rem; }
.maths-game-pick-v229 { display: flex; align-items: flex-start; gap: .45rem; margin: .35rem 0; }
.maths-game-pick-v229 input { width: auto; margin: .2rem 0 0; }

/* --- Training ------------------------------------------------------------
   The tab is hidden until something is assigned, so that seeing it at all
   means something is waiting; overdue turns it red. */
#tabNav .training-tab-overdue-v230 { color: #b91c1c; font-weight: 700; }

.training-summary-v230 { margin: .2rem 0 .6rem; font-weight: 600; color: #334155; }
.training-summary-alert-v230 { color: #b91c1c; }
.training-list-v230,
.training-requirement-list-v230 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .7rem;
}
.training-card-v230,
.training-requirement-v230 {
  padding: .8rem;
  border: 1px solid #cbd9e5;
  border-left-width: 5px;
  border-radius: .7rem;
  background: #fff;
}
.training-card-head-v230 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
}
.training-card-head-v230 h4 { margin: 0; font-size: .98rem; }
.training-status-v230 {
  padding: .1rem .45rem;
  border-radius: 1rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.training-when-v230 { margin: .3rem 0; font-weight: 600; }

/* Status is carried by a colour AND by a word, because a colour alone is not
   a signal to somebody who cannot tell red from green. */
.training-card-v230.is-overdue-v230 { border-left-color: #b91c1c; background: #fef4f4; }
.is-overdue-v230 .training-status-v230 { background: #fee2e2; color: #991b1b; }
.training-card-v230.is-due-soon-v230 { border-left-color: #b45309; background: #fffbf3; }
.is-due-soon-v230 .training-status-v230 { background: #fef3c7; color: #92400e; }
.training-card-v230.is-upcoming-v230 { border-left-color: #64748b; }
.is-upcoming-v230 .training-status-v230 { background: #e2e8f0; color: #334155; }
.training-card-v230.is-complete-v230 { border-left-color: #2f7d4c; background: #f5fbf7; }
.is-complete-v230 .training-status-v230 { background: #dcfce7; color: #166534; }

.training-requirement-v230.is-archived-v230 { opacity: .68; border-left-color: #94a3b8; }
.training-overdue-count-v230 { color: #b91c1c; }
.training-assignment-list-v230 { margin: .4rem 0; padding-left: 1.1rem; font-size: .85rem; }
.training-assignment-list-v230 li.is-overdue-v230 { color: #b91c1c; font-weight: 600; }
.training-requirement-actions-v230 { flex-direction: row !important; flex-wrap: wrap; gap: .35rem; }

.training-requirement-form-v230,
.training-assign-panel-v230 {
  margin: .6rem 0 1rem;
  padding: .8rem;
  border: 1px solid #cbd9e5;
  border-radius: .7rem;
  background: #f8fbfd;
}
.training-assign-rows-v230 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: .4rem;
  max-height: 24rem;
  overflow-y: auto;
  margin: .5rem 0;
}
.training-assign-row-v230 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  background: #fff;
}
.training-assign-who-v230 { display: flex; align-items: center; gap: .4rem; margin: 0; flex: 1 1 9rem; }
.training-assign-who-v230 input { width: auto; margin: 0; }
.training-assign-due-v230 { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .82rem; }
.training-assign-due-v230 input { width: auto; }