/* SchoolDay v251: Parent Page access on the pupil, and the Maths Game tab.

   Both live inside pupil panels that already have their own card styling, so
   nothing here paints a background or a border -- it lays things out. */

/* ---------------------------------------------- Parent Page access */

.pupil-parent-access-v251 {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px solid var(--admin-rule, #d9e5f2);
}

.pupil-parent-access-list-v251 {
  display: grid;
  gap: .6rem;
}

.pupil-parent-access-card-v251 {
  padding: .7rem .85rem;
  border: 2px solid var(--admin-rule, #d9e5f2);
  border-radius: .6rem;
}

.pupil-parent-access-card-v251 h5 { margin: 0 0 .15rem; }
.pupil-parent-access-card-v251 p { margin: 0 0 .3rem; }

/* Revoked is not an error and is not a warning. It is a state, and it reads as
   one: the card recedes rather than turning red. */
.pupil-parent-access-card-v251.is-revoked { opacity: .72; }

.pupil-parent-access-on-v251,
.pupil-parent-access-off-v251 {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}

.pupil-parent-access-on-v251 { background: #dcfce7; color: #065f46; }
.pupil-parent-access-off-v251 { background: #e5e7eb; color: #374151; }

.pupil-parent-access-status-v251 { min-height: 1.2em; margin: .4rem 0 0; }

/* The adult a registering parent already is, offered at approval. */
.parents-admin-adult-match-v251 { margin-top: .4rem; }

.parents-admin-adult-option-v251 {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .25rem 0;
  font-size: .9rem;
}

/* ------------------------------------------------- the Maths Game tab */

/* v259: THESE TABS ARE STYLED BY THE PUPIL TAB RULE, not by themselves.

   They used to set a see-through background and no colour. Every admin button
   is blue with WHITE text by default (styles.css), so an inactive tab was
   white text on a white panel -- invisible, which is what Sean was looking at.
   The same shape of fault as v257's back arrow: override the background,
   inherit the colour, and the two no longer belong together.

   The selector now sits in the group in admin-pupils-v213.css beside
   .pupil-workspace-tabs-v213 and .attendance-view-tabs-v213, so this row is
   the same thing as every other sub-tab row on the page and stays that way
   when the house style changes. Nothing bespoke is left here on purpose. */

.pupil-maths-timeline-v251 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.pupil-maths-game-v251 {
  padding: .6rem .8rem;
  border-left: 4px solid var(--admin-accent, #1765a8);
  border-radius: .35rem;
  background: var(--admin-panel-soft, #f4f8fc);
}

.pupil-maths-game-head-v251 {
  margin: 0 0 .35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
}

.pupil-maths-topics-v251,
.pupil-maths-events-v251 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .15rem;
}

/* Name, count, time -- the same three columns as the parent's page, so the two
   views of one game do not need reading twice. minmax(0,1fr) on the name: an
   `auto` column sizes to its longest label and pushes the numbers off the
   card, which is the fault the floated legend caused on this very page. */
.pupil-maths-topics-v251 li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem auto;
  gap: .5rem;
  align-items: baseline;
  font-size: .86rem;
}

.pupil-maths-topics-v251 li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pupil-maths-topics-v251 li > span:nth-child(2) { text-align: right; opacity: .8; }
.pupil-maths-topics-v251 li > span:last-child { white-space: nowrap; font-weight: 700; }

.pupil-maths-events-v251 li {
  font-size: .86rem;
  padding: .1rem 0 .1rem .8rem;
  border-left: 3px solid transparent;
}

/* The three that matter are told apart by colour as well as by words, because
   a list of eleven lines is scanned and not read. */
.pupil-maths-event-v251.is-promoted,
.pupil-maths-event-v251.is-fast_tracked { border-left-color: #22c55e; }
.pupil-maths-event-v251.is-lapsed { border-left-color: #f59e0b; }
.pupil-maths-event-v251.is-stage_up,
.pupil-maths-event-v251.is-rung_up { border-left-color: #2563eb; }

.pupil-maths-key-v251 {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: 0 0 .7rem;
  font-size: .82rem;
}

.pupil-maths-key-v251 > span { display: inline-flex; align-items: center; gap: .3rem; }

.pupil-maths-dot-v251 {
  width: .8rem;
  height: .8rem;
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, .18);
}

.pupil-maths-branch-v251 { margin-bottom: 1.1rem; }
.pupil-maths-branch-v251 h4 { margin: 0 0 .15rem; }
.pupil-maths-branch-v251 > p { margin: 0 0 .45rem; }

.pupil-maths-stages-v251 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .25rem;
}

.pupil-maths-stages-v251 li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6rem, 12rem) auto;
  gap: .6rem;
  align-items: center;
  padding: .25rem .4rem;
  border-radius: .35rem;
}

.pupil-maths-stages-v251 li.current {
  background: var(--admin-panel-soft, #f4f8fc);
  outline: 2px solid var(--admin-accent, #1765a8);
}

.pupil-maths-stage-name-v251 { min-width: 0; font-size: .88rem; overflow-wrap: anywhere; }
.pupil-maths-stage-name-v251 em { font-style: normal; font-size: .76rem; font-weight: 700; opacity: .8; }

/* The bar shows the WHOLE stage, so the grey is the work still to do -- which
   is the part a total cannot express. */
.pupil-maths-bar-v251 {
  display: flex;
  height: .8rem;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
}

.pupil-maths-bar-v251 > span { display: block; height: 100%; }

.pupil-maths-count-v251 { font-size: .8rem; font-weight: 700; white-space: nowrap; opacity: .85; }

@media (max-width: 40rem) {
  .pupil-maths-stages-v251 li { grid-template-columns: minmax(0, 1fr) auto; }
  .pupil-maths-stages-v251 .pupil-maths-bar-v251 { grid-column: 1 / -1; }
  /* The name takes a line of its own and the two numbers share the next.
     Hiding the count would be tidier and would lose the number the row is
     about. */
  .pupil-maths-topics-v251 li { grid-template-columns: minmax(0, 1fr) auto; }
  .pupil-maths-topics-v251 li > span:first-child { grid-column: 1 / -1; }
  .pupil-maths-topics-v251 li > span:nth-child(2) { text-align: left; }
}

/* v258: the way through from the timeline, and the way back to all games. */
.pupil-maths-link-line-v258 {
  margin: .4rem 0 0;
}

.pupil-maths-focus-v258 {
  margin: 0 0 .6rem;
  padding: .5rem .7rem;
  border-radius: .5rem;
  background: rgba(23, 101, 168, 0.08);
  font-size: .95rem;
}