*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.mono {
  font-family: var(--font-mono);
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}
.display {
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.title {
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.heading {
  font-size: 1.25rem;
  line-height: 1.4;
}
.small {
  font-size: 0.875rem;
  line-height: 1.43;
}
.caption {
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.01em;
}
.muted {
  color: var(--steel);
}

/* One primary button per screen: flat signal fill, ink label, large enough to pass contrast (DESIGN.md section 2). */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius);
  background: var(--signal);
  color: var(--ink);
  font: 700 1.1667rem/1 var(--font-sans); /* 18.67px bold: large text for contrast (4.24:1 on vermilion) */
  text-decoration: none;
  cursor: pointer;
}
.btn-primary:active {
  filter: brightness(0.94);
  transform: translateY(1px);
}
.btn-primary[disabled] {
  background: var(--mist);
  color: var(--steel-ink);
  cursor: not-allowed;
}
.link {
  color: var(--ink);
  text-decoration: underline;
}

/* Status chips (DESIGN.md section 4) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
}
.chip--done {
  background: var(--ink);
  color: #fff;
}
.chip--between {
  background: var(--steel);
  color: #fff;
}
.chip--todo {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--mist);
}
.chip--attention {
  background: transparent;
  color: var(--ink);
}
.chip--attention::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
}
.chip--source {
  background: var(--mist);
  color: var(--steel-ink);
}

.rule {
  border: 0;
  border-top: var(--rule);
  margin: var(--space-5) 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icons: one line family, 24px, in a 40px mist square (DESIGN.md section 4) */
.icon {
  flex: none;
  width: 24px;
  height: 24px;
}
.icon-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--steel-ink);
}

/* Crest: the supplied logo file in a mist frame */
.crest {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--mist);
}
.crest__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* the JPEG's white ground takes on whatever is behind it */
  mix-blend-mode: multiply;
}

.wordmark {
  margin: 0;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Choice list: large tappable rows that lead somewhere (sign-in size set) */
.choice-list {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.choice {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 125px;
  padding: 0 28px;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.choice .icon-chip {
  width: var(--signin-icon-square);
  height: var(--signin-icon-square);
}
.choice .icon-chip .icon {
  width: var(--signin-icon);
  height: var(--signin-icon);
}
.choice > .icon {
  width: 48px;
  height: 48px;
}
.choice__label {
  flex: 1;
  font-size: var(--signin-label);
  font-weight: 600;
  line-height: 1.2;
}
.signin-heading {
  font-size: var(--signin-heading);
  font-weight: var(--signin-heading-weight);
  line-height: 1;
  letter-spacing: var(--signin-heading-tracking);
}
.signin-link {
  font-size: var(--signin-link);
}

/* Screen 24: sign-in chooser */
.chooser {
  display: grid;
  grid-template-columns: 594px 1px 649px;
  max-width: 1244px;
  margin: 0 auto;
  padding: 51px 0 var(--space-7);
}
.chooser::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  background: var(--mist);
}
.chooser__brand {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 9px;
}
.chooser__brand .crest {
  width: 465px;
  border-radius: var(--radius-crest-large);
}
.chooser__brand .crest__img {
  border-radius: calc(var(--radius-crest-large) - var(--space-4));
  background: var(--surface); /* screen 24 shows the crest on white inside its mist frame */
  mix-blend-mode: normal;
}
.chooser__school {
  margin: 40px 0 0;
  font-size: 2rem; /* brand lockup, sized to the image */
  font-weight: 600;
  line-height: 1.2;
}
.chooser .wordmark {
  font-size: 4.75rem; /* 76px */
}
.chooser__options {
  grid-column: 3;
  grid-row: 1;
  padding: 44px 0 0 62px;
}
.chooser__options .signin-heading {
  margin-bottom: 46px;
}
.chooser__first-time {
  display: inline-block;
  margin-top: 16px;
}

@media (max-width: 1279px) {
  .chooser {
    grid-template-columns: 1fr;
    max-width: 560px;
    padding: var(--space-6) var(--space-4) var(--space-7);
  }
  .chooser::before {
    display: none;
  }
  .chooser__brand,
  .chooser__options {
    grid-column: 1;
    grid-row: auto;
    padding: 0;
  }
  .chooser__brand .crest {
    width: 160px;
    padding: var(--space-2);
  }
  .chooser__school {
    margin-top: var(--space-4);
    font-size: 1.25rem;
  }
  .chooser .wordmark {
    font-size: 3rem;
  }
  .chooser__options {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: var(--rule);
  }
  .chooser__options .signin-heading {
    margin-bottom: var(--space-5);
  }
  .choice-list {
    gap: var(--space-3);
  }
  .choice {
    min-height: 80px;
    padding: 0 var(--space-4);
    gap: var(--space-4);
  }
  .choice > .icon {
    width: 32px;
    height: 32px;
  }
}

/* Honest "Not available yet" state */
.notice {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}
.notice > * + * {
  margin-top: var(--space-4);
}
.first-time dt {
  font-weight: 600;
}
.first-time dd {
  margin: var(--space-1) 0 var(--space-5);
}

.btn-block {
  width: 100%;
}
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Inputs: label above, error below with a signal dot and outline (DESIGN.md section 4) */
.field + .field {
  margin-top: 26px;
}
.field__label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--signin-form-text);
  font-weight: 500;
  line-height: 1.25;
}
.input {
  display: flex;
  align-items: center;
  height: var(--signin-control-height);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
}
.input:focus-within {
  outline: var(--focus);
  outline-offset: 2px;
}
.input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 400 var(--signin-input) / 1 var(--font-sans);
  outline: none;
}
.input input.mono {
  font-family: var(--font-mono);
}
.input input[type="password"] {
  letter-spacing: 0.25em;
}
.input--invalid {
  border-color: var(--signal);
}
.input__action {
  align-self: stretch;
  margin: var(--space-3) 0;
  padding: 0 var(--space-4);
  border: 0;
  border-left: var(--rule);
  background: none;
  color: var(--steel);
  font: 400 var(--signin-form-text) / 1 var(--font-sans);
  cursor: pointer;
}
.field-error {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--signin-form-text);
  line-height: 1.35;
}
.field-error::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--signal);
}
.field-error__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Sign-in form pages (25-31): small header and one centred card */
.signin-header {
  padding: 24px var(--space-4) 0;
}
.signin-header__home {
  display: inline-flex;
  align-items: center;
  gap: 19px;
  color: var(--ink);
  text-decoration: none;
}
.signin-header .crest {
  width: var(--signin-crest);
  padding: 0;
  border-radius: 0;
  background: none; /* no frame: the crest sits straight on the page, as in the references */
}
.signin-header__rule {
  width: 1px;
  height: 84px;
  margin-right: 5px;
  background: var(--mist);
}
.signin-header .wordmark {
  font-size: var(--signin-wordmark);
}
.signin-card {
  width: 665px;
  max-width: calc(100% - 2 * var(--space-4));
  margin: 4px auto var(--space-7);
  padding: 44px 52px 50px;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.signin-form-heading {
  margin: 0 0 44px;
  font-size: var(--signin-form-heading);
  font-weight: var(--signin-heading-weight);
  line-height: 1;
  letter-spacing: var(--signin-heading-tracking);
  text-align: center;
}
.signin-card .btn-primary {
  height: var(--signin-control-height);
  margin-top: 28px;
  font-size: var(--signin-button-label);
}
.signin-card__rule {
  margin: 32px 0 30px;
}
.signin-card__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--signin-form-text);
}

/* Fixed lead-in inside an input, such as +234 */
.input__prefix {
  padding-left: var(--space-5);
  font-size: var(--signin-input);
  line-height: 1;
}
.input__prefix + input {
  padding-left: var(--space-4);
}
.field-help {
  margin: var(--space-3) 0 0;
  color: var(--steel);
  font-size: var(--signin-help);
  line-height: 1.35;
}
.signin-note {
  margin: 124px 0 0;
  color: var(--steel);
  font-size: var(--signin-note);
  text-align: center;
}
.signin-note--close {
  margin-top: 30px;
}
.signin-card .signin-card__send {
  margin-top: 56px;
}
.signin-card .signin-card__verify {
  margin-top: 54px;
}
.signin-form-heading--tight {
  margin-bottom: 14px;
}
.signin-sent {
  margin: 0 0 14px;
  color: var(--steel);
  font-size: var(--signin-help);
  line-height: 1.35;
}
.signin-resend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 30px;
  color: var(--steel);
  font-size: var(--signin-form-text);
}
.signin-resend .link {
  color: var(--ink);
}
.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--signin-form-text);
}
.checkbox input {
  flex: none; /* a long label must not squeeze the box */
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
}

/* Six code boxes over one real input. Without JavaScript the input shows as a plain field. */
.code-input {
  position: relative;
}
.code-input input {
  width: 100%;
  height: var(--signin-code-box);
  padding: 0 var(--space-5);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--signin-code-digit) / 1 var(--font-mono);
  letter-spacing: 0.3em;
}
.code-input__boxes {
  display: none;
}
.js .code-input input {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.js .code-input__boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--signin-code-gap);
  height: var(--signin-code-box);
  pointer-events: none;
}
.code-input__boxes span {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: 400 var(--signin-code-digit) / 1 var(--font-mono);
}
.code-input:focus-within .code-input__boxes span.is-current {
  outline: var(--focus);
  outline-offset: 2px;
}
.code-input--invalid .code-input__boxes span,
.code-input--invalid input {
  border-color: var(--signal);
}

@media (max-width: 599px) {
  body:has(.signin-card) {
    background: var(--surface);
  }
  .signin-header {
    padding: 29px var(--space-4) 0;
  }
  .signin-header__rule {
    display: none;
  }
  .signin-header__home {
    gap: 18px;
  }
  .signin-card {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 84px 20px var(--space-6);
    border: 0;
    border-radius: 0;
  }
  .signin-form-heading {
    margin-bottom: 38px;
    text-align: left;
  }
  .signin-form-heading--tight {
    margin-bottom: 12px;
  }
  .field__label {
    margin-bottom: 8px;
  }
  .signin-card .signin-card__send {
    margin-top: 58px;
  }
  /* The "If this number is registered" line takes two lines here; the gaps below absorb it. */
  .signin-resend {
    margin-top: 22px;
  }
  .signin-card .signin-card__verify {
    margin-top: 40px;
  }
}

/* Screen 28: 2-step verification */
.signin-card--verify {
  margin-top: 18px; /* screen 28 sits 14px lower than 25 and 27 */
}
.signin-form-heading--chip {
  margin-bottom: 30px;
}
.who-chip {
  display: table;
  margin: 0 auto 50px;
  padding: 12px var(--space-6);
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--steel-ink);
  font-size: 1.375rem; /* 22px, measured on screen 28 */
  line-height: 1;
  font-weight: 500;
}
.signin-alt {
  margin: 30px 0 13px;
  font-size: var(--signin-form-text);
}
.setup-steps {
  margin: 0 0 var(--space-5);
  padding-left: 1.25em;
  font-size: var(--signin-help);
  line-height: 1.45;
}
.setup-steps li + li {
  margin-top: var(--space-3);
}
.setup-key {
  display: block;
  margin: var(--space-2) 0;
  font-size: var(--signin-input);
  letter-spacing: 0.04em;
  word-break: break-all;
}
.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: var(--space-5) 0 var(--space-6);
  padding-left: 2.25em; /* two-digit numbers need the room */
  font-size: var(--signin-input);
}
.backup-codes li {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .backup-codes {
    grid-template-columns: 1fr;
  }
}

/* Screen 30: set password */
.signin-card--password {
  width: 629px;
  max-width: calc(100% - 2 * var(--space-4));
  margin-top: -74px;
  padding-bottom: 36px; /* the card rises beside the header, as in the reference */
}
.signin-card--password .field + .field {
  margin-top: 15px;
}
.signin-form-heading--welcome {
  margin-bottom: 8px;
}
.signin-welcome {
  margin: 0 0 18px;
  color: var(--steel);
  font-size: 1.5rem;
  text-align: center;
}
.rules {
  margin: 12px 0 0;
  padding: 0;
  border-top: var(--rule);
  list-style: none;
}
.pw-rule {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 48px;
  border-bottom: var(--rule);
  font-size: var(--signin-form-text);
}
.pw-rule__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--field-border);
  border-radius: 50%;
}
.pw-rule.is-met .pw-rule__mark {
  border-color: var(--ink);
  background: var(--ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}
.pw-rule--server {
  color: var(--steel);
}
.signin-card .signin-card__save {
  margin-top: 62px;
}

/* Screen 31: forgot password, form beside the reply */
.signin-card--split {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.forgot {
  --signin-control-height: 75px; /* screen 31's fields and button are taller */
  display: grid;
  grid-template-columns: 650px 1px 1fr;
  min-height: 520px;
  margin-top: 35px;
  padding: 0 0 0 73px;
}
.forgot::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  background: var(--mist);
}
.forgot__form {
  grid-column: 1;
  grid-row: 1;
  padding: 76px 66px 0 0;
}
.forgot__heading {
  margin: 0 0 42px;
  font-size: 3.75rem; /* 60px, measured on screen 31 */
  font-weight: var(--signin-heading-weight);
  line-height: 1;
  letter-spacing: var(--signin-heading-tracking);
}
.signin-card .forgot__send {
  height: var(--signin-control-height);
  margin-top: 39px;
}
.forgot__students {
  margin-top: var(--space-4);
}
.forgot__sent {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 125px 0 0 40px;
  text-align: center;
}
.forgot__icon {
  width: 110px;
  height: 106px;
  border-radius: 18px;
  color: var(--ink);
}
.forgot__icon .icon {
  width: 56px;
  height: 56px;
}
.forgot__sent-heading {
  margin: 32px 0 12px;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.forgot__sent-text {
  max-width: 46ch;
  margin: 0;
  color: var(--steel);
  font-size: var(--signin-help);
}

@media (max-width: 1023px) {
  .signin-card--password {
    margin-top: 0;
  }
  .forgot {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 0 var(--space-4) var(--space-6);
  }
  .forgot::before {
    display: none;
  }
  .forgot__form,
  .forgot__sent {
    grid-column: 1;
    grid-row: auto;
    padding: var(--space-6) 0 0;
  }
  .forgot__sent-heading {
    margin-top: var(--space-5);
    font-size: 1.75rem;
  }
}

@media (max-width: 599px) {
  .signin-card--password {
    width: auto;
    max-width: none;
    padding-bottom: var(--space-6);
  }
  .signin-welcome {
    text-align: left;
  }
  .forgot__heading {
    font-size: var(--signin-form-heading);
  }
}

/* App shell (DESIGN.md section 5): rail, top bar, page; on phones a header and a tab bar */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--surface);
}
.app--admin {
  grid-template-columns: 264px 1fr;
}
.rail {
  display: flex;
  flex-direction: column;
  border-right: var(--rule);
  background: var(--surface);
}
.rail__brand {
  display: flex;
  flex-direction: column;
  padding: 14px 26px 0 30px;
  color: var(--ink);
  text-decoration: none;
}
.crest--rail {
  width: 152px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.rail__school {
  margin-top: 8px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.rail__learn {
  color: var(--steel);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
}
.rail__items {
  display: grid;
  gap: 17px;
  margin: 52px 0 var(--space-6); /* items start where the reference's taller crest ends */
  padding: 0;
  list-style: none;
}
.rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 23px;
  min-height: 44px;
  padding: 0 var(--space-2) 0 24px;
  white-space: nowrap;
  color: var(--steel);
  font-size: 1.25rem;
  text-decoration: none;
}
.rail__item .icon-chip {
  width: 44px;
  height: 44px;
  color: var(--ink);
}
.rail__item.is-active {
  color: var(--ink);
  font-weight: 600;
}
.rail__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--signal);
}
.app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 66px;
  padding: 0 var(--space-5) 0 29px;
  border-bottom: var(--rule);
}
.topbar__brand {
  display: none;
}
.topbar__search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  max-width: 875px;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  background: var(--paper);
  border: var(--rule);
  color: var(--steel);
}
.topbar__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  outline: none;
}
.topbar__search:focus-within {
  outline: var(--focus);
  outline-offset: 2px;
}
.topbar__bell {
  margin-left: auto;
  color: var(--ink);
}
.usermenu {
  position: relative;
}
.usermenu summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  cursor: pointer;
}
.usermenu summary::-webkit-details-marker {
  display: none;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}
.usermenu__name {
  color: var(--steel);
  font-size: 1.125rem;
}
.usermenu__panel {
  position: absolute;
  right: 0;
  z-index: 2;
  display: grid;
  gap: var(--space-3);
  min-width: 180px;
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.page {
  padding: 30px var(--space-5) var(--space-7) 29px;
  max-width: 1200px;
}
.page__date {
  margin: 0 0 6px;
  color: var(--steel);
  font-size: 1.125rem;
}
.page__meta {
  margin: var(--space-2) 0 0;
  color: var(--steel);
}
.page__lead {
  max-width: 65ch;
  margin: var(--space-5) 0 0;
  color: var(--steel);
  font-size: 1.25rem;
}
.page__section {
  margin-top: var(--space-6);
}
.page__section .heading {
  margin-bottom: var(--space-3);
}
.plain-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabbar {
  display: none;
}

/* A class name with its level as a tooltip; the level shows as text where asked */
.class-name,
.class-name__level {
  font-family: var(--font-sans); /* class names are words, even inside a mono line */
}
.class-name {
  position: relative;
  border-bottom: 1px dotted var(--steel);
  cursor: help;
}
.class-name__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 3;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font: 400 0.875rem/1.3 var(--font-sans);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.class-name:hover .class-name__tip,
.class-name:focus .class-name__tip,
.class-name:focus-visible .class-name__tip {
  opacity: 1;
}
.class-name__level {
  color: var(--steel);
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  /* A mouse shows the level in the tooltip (keyboard focus too); touch screens of any width
     have no hover, so they keep the secondary text (decisions.md, Classes) */
  .class-name__level {
    display: none;
  }
}

/* Round 38: rail items past the phone's four tabs, in the account menu on a phone only. */
.usermenu .usermenu__panel a.usermenu__phone { display: none; }
@media (max-width: 899px) {
  .usermenu .usermenu__panel a.usermenu__phone { display: flex; }
  .app,
  .app--admin {
    grid-template-columns: 1fr;
    padding-bottom: 76px;
  }
  .rail,
  .topbar__search,
  .usermenu__name,
  .usermenu summary .icon {
    display: none;
  }
  .topbar {
    height: auto;
    padding: 24px var(--space-4) 0;
    border-bottom: 0;
  }
  .topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: var(--ink);
    text-decoration: none;
  }
  .topbar__brand .crest {
    width: 64px;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .topbar__learn {
    font-size: 1.75rem;
    font-weight: 700;
  }
  .topbar__bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--mist);
  }
  .page {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
  .page .display {
    font-size: 1.75rem; /* the title size: page headings fit one line on a phone */
    line-height: 1.2;
  }
  .tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column; /* four tabs, or fewer for staff */
    border-top: var(--rule);
    background: var(--surface);
  }
  .tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 4px 10px;
    color: var(--steel);
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .tabbar__item.is-active {
    color: var(--ink);
  }
  .tabbar__item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--signal);
  }
}

/* Admin pages: a page head with one primary action, a table beside a detail panel */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}
.page-head__action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 26px;
}
.page-head__action input {
  width: 220px;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.page-head__action .btn-primary {
  min-height: 54px;
  padding: 0 var(--space-6);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  margin-top: 34px;
}
.split__main {
  padding-right: 30px;
}
.split__side {
  padding-left: 32px;
  border-left: var(--rule);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.25rem;
}
.data-table th {
  padding: 0 var(--space-3) 18px;
  border-bottom: var(--rule);
  color: var(--steel);
  font-weight: 400;
  text-align: left;
}
.data-table td {
  height: 66px;
  padding: 0 var(--space-3);
  border-bottom: var(--rule);
}
.data-table .num {
  text-align: right;
}
.data-table tr.is-selected td {
  background: var(--mist);
}
.data-table tr.is-selected td:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.data-table tr.is-selected td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.row-link {
  color: var(--ink);
  text-decoration: none;
}
.row-link:hover {
  text-decoration: underline;
}
.pager {
  display: flex;
  gap: var(--space-5);
  margin: var(--space-4) 0 0;
}
.detail__label {
  margin: 0;
  color: var(--steel);
  font-size: 1.125rem;
}
.detail__title {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.detail__level {
  margin: 0;
}
.detail__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 5px;
  padding: 14px 0 8px;
  border-top: var(--rule);
}
.numbered {
  margin: 0;
  padding: 0;
  list-style: none;
}
.numbered li {
  display: flex;
  gap: var(--space-6);
  padding: 6px 0;
  border-bottom: var(--rule);
  font-size: 1.125rem;
}
.numbered__n {
  width: 1.5em;
  color: var(--steel);
}

@media (max-width: 1100px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split__main {
    padding-right: 0;
    overflow-x: auto;
    /* DESIGN.md section 4: wide tables scroll sideways on phones, with a fade at the edge */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .split__main .data-table {
    min-width: 620px;
    font-size: 1rem;
  }
  .split__main .pager,
  .split__main > p {
    position: sticky;
    left: 0;
  }
  .split__side {
    margin-top: var(--space-6);
    padding: var(--space-5) 0 0;
    border-top: var(--rule);
    border-left: 0;
  }
  .page-head {
    flex-direction: column;
  }
  .page-head__action {
    flex-wrap: wrap;
    margin-top: 0;
  }
}

/* Screen 63: people */
.page__sub {
  margin: var(--space-2) 0 0;
  color: var(--steel);
  font-size: 1.5rem;
}
.page-head__button {
  min-height: 54px;
  margin-top: 26px;
  padding: 0 var(--space-7);
}
.filters {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 24px;
}
.filters__search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  height: 46px;
  padding: 0 var(--space-4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--steel);
}
.filters__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  outline: none;
}
.filters__search:focus-within {
  outline: var(--focus);
  outline-offset: 2px;
}
.filters__class {
  display: grid;
  gap: 6px;
  width: 224px;
}
.filters__label {
  color: var(--steel);
  font-size: 1.125rem;
}
.filters__class select {
  height: 46px;
  padding: 0 var(--space-4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
}
.data-table--people th {
  padding-top: 14px;
  background: var(--paper);
}
.data-table--people td {
  height: 41px;
  font-size: 1.125rem;
}
.sort {
  color: var(--steel);
  text-decoration: none;
}
.sort::after {
  content: " ↕";
  font-size: 0.75em;
}
.sort.is-sorted {
  color: var(--ink);
  font-weight: 600;
}
.chev {
  width: 32px;
  color: var(--steel);
}
.person__head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.avatar--large {
  width: 84px;
  height: 84px;
  font-size: 2rem;
  font-weight: 400;
}
.person__name {
  margin: 0;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}
.person__id {
  margin: 4px 0 0;
  color: var(--steel);
  font-size: 1.25rem;
}
.tabs {
  display: flex;
  gap: var(--space-6);
  margin: 24px 0 26px;
  border-bottom: var(--rule);
}
.tabs__tab {
  padding: 0 0 12px;
  color: var(--steel);
  font-size: 1.125rem;
  text-decoration: none;
}
.tabs__tab.is-active {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--ink);
}
.facts {
  display: grid;
  gap: 2px;
  margin: 0;
}
.facts dt {
  margin-top: 12px;
  color: var(--steel);
  font-size: 1rem;
}
.facts dd {
  margin: 0;
  font-size: 1.25rem;
}
.facts--wide dd {
  font-size: 1.5rem;
}
.person__action {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.stack-form {
  display: grid;
  gap: var(--space-5);
  max-width: 560px;
  margin-top: var(--space-6);
}
.admin-field {
  display: grid;
  gap: 6px;
}
.admin-field__label {
  font-weight: 500;
}
.admin-field input,
.admin-field select,
.admin-field textarea {
  min-height: 48px;
  padding: 12px var(--space-4);
  resize: vertical;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.shown-once {
  max-width: 560px;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}
.shown-once__secret {
  font-size: 2rem;
  letter-spacing: 0.06em;
}
/* Screen 63's measured layout (kept off screen 64, which shares .split) */
.split--people {
  grid-template-columns: minmax(0, 1fr) 364px;
  margin-top: 24px;
}
.split--people .split__side {
  margin-top: -22px;
  padding-left: 35px;
}
.split--people .filters__class {
  position: relative;
}
.split--people .filters__label {
  position: absolute;
  bottom: calc(100% + 4px);
}
.split--people .data-table--people th {
  padding: 8px var(--space-3);
}
.split--people .tabs {
  margin: 14px 0 20px;
}
.split--people .filters {
  padding-right: 25px; /* the reference's class filter stops short of the table edge */
}
.numbered__text {
  flex: 1;
}
.numbered__action {
  color: var(--steel);
  font-size: 1rem;
}
.panel-form {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.panel-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}

/* Screen 65: staff, and the People tabs */
.page-tabs {
  display: flex;
  gap: 40px;
  margin-top: 18px;
  border-bottom: var(--rule);
}
.page-tabs__tab {
  padding: 4px 6px 12px;
  color: var(--steel);
  font-size: 1.375rem;
  text-decoration: none;
}
.page-tabs__tab.is-active {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--ink);
}
.data-table--staff td {
  height: 48px;
}
.staff-detail {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.staff-detail__heading {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.125rem;
}
.staff-detail__row,
.staff-detail__approver {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 6px 0;
  border-bottom: var(--rule);
}
.staff-detail__approver {
  margin-top: var(--space-4);
}
.staff-detail__approver .checkbox {
  align-items: flex-start; /* the box sits on the first line when the label wraps */
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.panel-form select {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.page-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.page-head__actions .link {
  margin-top: 26px;
}
/* Screen 65's measured spacing */
.split--staff {
  grid-template-columns: minmax(0, 1fr) 300px;
  margin-top: 24px;
}
.split--staff .data-table th {
  padding: 4px var(--space-3) 8px;
}
.split ~ .page-tabs,
.page-head + .page-tabs {
  margin-top: 8px;
}

/* CSV import (no mockup): screens 63 and 64 components, plus what a preview needs. */
.admin-field input[type="file"] {
  min-width: 0; /* a file input will not shrink in a grid on its own */
  max-width: 100%;
}
.import-kind {
  border: 0;
  margin: 0;
  padding: 0;
}
.import-kind .checkbox {
  margin-top: var(--space-3);
}
.import-done {
  margin: var(--space-5) 0 0;
}
.import-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-6) 0 var(--space-5);
}
.import-counts dt {
  color: var(--steel);
}
.import-counts dd {
  margin: var(--space-1) 0 0;
  font-size: 1.25rem;
}
.import-table .data-table td {
  height: auto;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  vertical-align: top;
}
.import-table th,
.import-table td.mono {
  white-space: nowrap;
}
.import-child {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
}
/* A date of birth stays on one line; the cancel link sits clear of Confirm, as elsewhere */
.import-dob { white-space: nowrap; }
.import-cancel { margin-top: var(--space-4); }
.import-note {
  display: block;
  color: var(--steel);
  font-family: var(--font-sans);
}
.import-status p {
  margin: var(--space-2) 0 0;
  font-size: 1rem;
}
.import-tick {
  margin-top: var(--space-3);
  font-size: 1rem;
}
.import-confirm {
  margin-top: var(--space-6);
}
.import-table {
  position: relative; /* keeps visually hidden headers inside the sideways scroll */
}
@media (max-width: 1100px) {
  .import-table {
    overflow-x: auto;
    /* DESIGN.md section 4: wide tables scroll sideways on phones, with a fade at the edge */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .import-table .data-table {
    min-width: 760px;
    font-size: 1rem;
  }
}

@media (max-width: 1100px) {
  /* Screens 63 and 65 set their own columns above; on phones they stack like every split. */
  .split--people,
  .split--staff {
    grid-template-columns: minmax(0, 1fr); /* never wider than the screen */
  }
  .split--people .split__side {
    margin-top: var(--space-6);
    padding-left: 0;
  }
  .split__main {
    position: relative; /* keeps visually hidden labels inside the sideways scroll */
  }
  .page-head__actions {
    flex-wrap: wrap;
    row-gap: var(--space-3);
  }
  .page-head__actions .link,
  .page-head__button {
    margin-top: 0;
  }
}

/* Issue sign-ins (no mockup): the confirm page reuses screen 63 and 64 parts; slips print. */
.detail__action {
  margin: var(--space-3) 0 0;
}
.sign-ins__count {
  margin: var(--space-5) 0 var(--space-3);
}
.slips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.slip {
  padding: var(--space-4);
  border: 1px dashed var(--field-border); /* the cutting line */
  border-radius: var(--radius);
  background: var(--surface);
  break-inside: avoid;
}
.slip p {
  margin: 0;
}
.slips__warning {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: 1.25rem;
  font-weight: 600;
}
.slips__warning::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal); /* look here: these cannot be shown again */
}
.slip__private {
  margin-top: var(--space-2) !important;
  font-size: 0.875rem;
  font-weight: 600;
}
.slip__school,
.slip__how {
  color: var(--steel);
  font-size: 0.875rem;
}
.slip__name {
  margin-top: var(--space-2) !important;
  font-size: 1.25rem;
  font-weight: 600;
}
.slip__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0;
}
.slip__facts dt {
  color: var(--steel);
}
.slip__facts dd {
  margin: 0;
}
.slip__secret {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap; /* a password broken at its hyphens is easy to copy wrongly */
}
@media print {
  .rail,
  .topbar,
  .tabbar,
  .slips__screen {
    display: none !important;
  }
  body,
  .app {
    display: block;
    background: #fff;
  }
  .page {
    padding: 0;
  }
  .slips {
    grid-template-columns: 1fr 1fr;
    gap: 6mm;
    margin: 0;
  }
  .slip {
    border-color: var(--ink);
  }
}

/* Screen 36: a pupil's guardians */
.guardians__tabs {
  margin: var(--space-5) 0 var(--space-5);
}
.guardians__table td {
  height: auto;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  vertical-align: top;
}
.guardians__name {
  display: block;
  font-weight: 600;
}
.guardians__meta,
.guardians__line,
.guardians__reason {
  display: block;
  color: var(--steel);
  font-size: 1rem;
}
.guardians__line {
  margin-top: var(--space-1);
  font-size: 0.875rem;
}
.guardians__actions {
  font-size: 1rem;
}
.guardians__actions > * {
  display: block;
  margin-bottom: var(--space-1);
}
.guardians__add {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.guardians__add .heading {
  margin: 0 0 var(--space-4);
}
.guardians__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; /* a field with help text must not stretch its neighbours */
  gap: var(--space-4);
}
.guardians__fields .admin-field {
  align-content: start;
}
.guardians__add .field-help {
  margin: 0;
  font-size: 0.875rem;
}
.guardians__same {
  margin-top: var(--space-4);
}
.guardians__same p {
  margin: 0;
}
.guardians__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.guardians__submit .checkbox {
  margin-top: 0;
}
.guardians__notice {
  margin: 0 0 var(--space-4);
}
.guardians__history li {
  font-size: 1rem;
}
@media (max-width: 899px) {
  .guardians__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .guardians__add {
    padding: var(--space-4);
  }
}

/* Screen 37: the masked mobile sits apart from the step below it, as in the mockup */
.invite__mobile {
  margin-bottom: var(--space-5);
}

/* Screen 38: access paused, inside the parent shell */
.paused {
  max-width: 560px;
  margin: var(--space-7) auto 0;
  text-align: center;
}
.paused__icon {
  width: 96px;
  height: 96px;
}
.paused__icon .icon {
  width: 48px;
  height: 48px;
}
.paused__heading {
  margin: var(--space-5) 0 var(--space-3);
}
.paused__message {
  margin: 0 0 var(--space-3);
  color: var(--steel);
  font-size: 1.125rem;
}
.paused form {
  margin-top: var(--space-5);
}

/* Screens 32 and 34: family home */
.family {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  margin-top: var(--space-6);
}
.family__children {
  padding-right: var(--space-6);
}
.family__activity {
  padding-left: var(--space-6);
  border-left: var(--rule);
}
.family__cards {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.family__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
}
.family__card + .family__card {
  border-top: var(--rule);
}
.family__name {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
}
.family__class {
  font-size: 1rem;
}
.family__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: 0;
}
.family__facts dt {
  font-size: 1rem;
}
.family__facts dd {
  margin: 0;
  font-size: 0.875rem;
}
.family__household {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--rule);
  color: var(--steel);
}
@media (max-width: 1100px) {
  .family {
    grid-template-columns: minmax(0, 1fr);
  }
  .family__children {
    padding-right: 0;
  }
  .family__activity {
    margin-top: var(--space-6);
    padding: var(--space-5) 0 0;
    border-top: var(--rule);
    border-left: 0;
  }
}
@media (max-width: 599px) {
  .family__card {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Screen 33: "Viewing: Naomi" and the sheet that chooses a child */
.viewing {
  position: relative;
}
.viewing__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--steel-ink);
  cursor: pointer;
  list-style: none;
}
.viewing__summary::-webkit-details-marker {
  display: none;
}
.viewing__summary strong {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.viewing--rail {
  margin: var(--space-4) var(--space-4) 0 var(--space-5);
}
.viewing--rail .viewing__summary {
  max-width: 100%;
  font-size: 0.9375rem;
}
.viewing__sheet {
  position: absolute;
  z-index: 20;
  left: 0;
  width: 360px;
  margin-top: var(--space-2);
  padding: var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.12);
}
.viewing__sheet .heading {
  margin: 0 0 var(--space-4);
}
.viewing__choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.viewing__choice input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
}
.viewing__class {
  display: block;
  color: var(--steel);
  font-size: 0.875rem;
}
.viewing__note {
  margin: 0 0 var(--space-3);
  color: var(--steel);
  font-size: 0.875rem;
  text-align: center;
}
.viewing--topbar {
  display: none;
}
@media (max-width: 899px) {
  .topbar {
    flex-wrap: wrap; /* "Viewing: Naomi" takes its own line under "Learn" */
  }
  .topbar__brand {
    margin-right: auto;
  }
  .viewing--topbar {
    display: block;
    flex-basis: 100%;
    order: 5;
    margin: -18px 0 0 82px; /* under "Learn": the crest is 64 px wide, then an 18 px gap */
  }
  .viewing--topbar .viewing__summary {
    min-height: 36px;
    background: transparent;
    padding: 0;
  }
  .viewing--topbar .viewing__sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(var(--space-5) + 76px); /* clear of the tab bar */
  }
}

/* Screen 35: child profile */
.child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.child__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.child__facts > div {
  padding: var(--space-5);
}
.child__facts > div:nth-child(odd) {
  border-right: var(--rule);
}
.child__facts > div:nth-child(-n + 2) {
  border-bottom: var(--rule);
}
.child__facts dt {
  color: var(--steel);
}
.child__facts dd {
  margin: var(--space-2) 0 0;
  font-size: 1.5rem;
}
.child__facts dd.muted {
  font-size: 1rem;
}
.child__guardians {
  padding-left: var(--space-6);
  border-left: var(--rule);
}
.child__list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.child__list li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
}
.child__list li + li {
  border-top: var(--rule);
}
.child__guardian {
  font-size: 1.25rem;
  font-weight: 600;
}
.child__office {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
@media (max-width: 1100px) {
  .child {
    grid-template-columns: minmax(0, 1fr);
  }
  .child__guardians {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 599px) {
  .child__facts {
    grid-template-columns: 1fr;
  }
  .child__facts > div:nth-child(odd) {
    border-right: 0;
  }
  .child__facts > div:not(:last-child) {
    border-bottom: var(--rule);
  }
}

/* Screens 71-73: admissions (public form and the office queue) */
.public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--rule);
}
.public-header__home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--ink);
  text-decoration: none;
}
.public-header .crest {
  width: 72px;
  padding: 0;
  background: none;
}
.public-header__school {
  max-width: 14ch;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}
.public-header__learn {
  padding-left: var(--space-5);
  border-left: var(--rule);
  color: var(--steel);
  font-size: 1.75rem;
  text-decoration: none;
}
.public {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-7);
}
.stepper__count {
  margin: 0 0 var(--space-2);
  color: var(--steel);
}
.stepper {
  display: flex;
  justify-content: space-between;
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.stepper__step {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--steel);
}
.stepper__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--steel-ink);
}
.stepper__step.is-done .stepper__mark,
.stepper__step.is-current .stepper__mark {
  background: var(--ink);
  color: #fff;
}
.stepper__step.is-done,
.stepper__step.is-current {
  color: var(--ink);
}
.public__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-4) 0;
}
.public__second {
  margin-top: var(--space-4);
}
.public__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.review {
  margin-top: var(--space-5);
}
.review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: var(--rule);
}
.review__head .title {
  margin: 0 0 var(--space-2);
}
.review__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.review__facts dt {
  color: var(--steel);
}
.review__facts dd {
  margin: var(--space-1) 0 0;
  font-size: 1.125rem;
}
.received {
  max-width: 560px;
  margin: var(--space-7) auto 0;
  text-align: center;
}
.received__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--mist);
}
.received__mark .icon {
  width: 56px;
  height: 56px;
}
.received__ref {
  margin: var(--space-5) auto;
  padding: var(--space-4) 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.received__ref dt {
  color: var(--steel);
}
.received__ref dd {
  margin: var(--space-1) 0 0;
  font-size: 1.5rem;
}
.queue__count {
  margin: 26px 0 0;
  color: var(--steel);
}
.queue__count .mono {
  color: var(--ink);
  font-size: 2.5rem;
}
.queue__status {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.queue__history li {
  font-size: 0.875rem;
}
@media (max-width: 899px) {
  .public-header__school {
    font-size: 1.125rem;
  }
  .public-header .crest {
    width: 56px;
  }
  .public__fields,
  .review__facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .stepper__step {
    font-size: 0.875rem;
  }
}
form:not(:has([name="add_second"]:checked)) .public__second {
  display: none; /* shown only when "Add a second guardian" is ticked; always shown without :has */
}

/* Admin fields: an invalid field is outlined in vermilion with its message below (DESIGN.md
   section 4, Inputs), at the admin text size */
.admin-field [aria-invalid="true"] {
  border-color: var(--signal);
  outline: 1px solid var(--signal);
}
.admin-field .field-error {
  font-size: 1rem;
}

/* Screen 80: ID cards (printed; 54 x 86 mm portrait when printed) */
.idcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.idcard {
  overflow: hidden;
  border: 1px dashed var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  break-inside: avoid;
}
.idcard__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: var(--rule);
  background: var(--paper);
  line-height: 1.2;
}
.idcard__brand .crest {
  width: 48px;
  padding: 0;
  background: none;
}
.idcard__learn {
  display: block;
  color: var(--steel);
  font-size: 0.875rem;
}
.idcard__body {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
}
.idcard__initials {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  background: var(--steel);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
}
.idcard__facts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.idcard__facts dt {
  color: var(--steel);
  font-size: 0.75rem;
}
.idcard__facts dd {
  margin: 0;
  font-weight: 600;
}
.idcard__return {
  margin: var(--space-3);
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius);
  background: var(--mist);
  text-align: center;
}
.idcard__return p {
  margin: 0;
}
.idcard__label {
  color: var(--steel-ink);
}
.idcard__big {
  margin: var(--space-2) 0 var(--space-3) !important;
  font-size: 1.75rem;
  font-weight: 600;
}
@media print {
  .idcards {
    grid-template-columns: repeat(3, 54mm);
    gap: 4mm;
    margin: 0;
  }
  .idcard {
    height: 86mm;
    border-color: var(--ink);
  }
}

/* Registers (core-05, screen 54) */
.register__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--mist);
}
.register__bar > div {
  display: grid;
}
.register__bar strong {
  font-size: 1.5rem;
  font-weight: 600;
}
.register__bar .btn-primary {
  margin-left: auto;
}
.register__label {
  color: var(--steel-ink);
  font-size: 0.875rem;
}
.register__table td {
  height: 56px;
}
.segments {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.segments__option {
  position: relative;
  cursor: pointer;
}
.segments__option input {
  position: absolute;
  opacity: 0;
}
.segments__option span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: 0.9375rem;
}
.segments__option + .segments__option span {
  border-left: 1px solid var(--field-border);
}
.segments__option input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
.segments__option--present input:checked + span {
  background: var(--ink);
  color: #fff;
}
.segments__option--late input:checked + span {
  background: var(--steel);
  color: #fff;
}
.segments__option--absent input:checked + span {
  font-weight: 600; /* attention: a vermilion dot and ink text, not a fill */
}
.segments__option--absent input:checked + span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
}
.register__summary dl {
  margin: 0;
}
.register__summary dl > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--rule);
}
.register__summary dt {
  min-width: 2.5ch;
  font-size: 2.5rem;
}
.register__summary dd {
  margin: 0;
  color: var(--steel);
}
.register__absent {
  color: var(--ink);
}
.register__marked {
  margin-top: var(--space-4);
}
.register__done {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.register__reported {
  display: block;
  color: var(--steel);
  font-size: 0.875rem;
}

/* Screen 12: timetable and news */
.tt__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.tt__class {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tt__class select {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.tt__week {
  margin: 0;
  font-size: 1.125rem;
}
.tt__week .link {
  padding: 0 var(--space-2);
  text-decoration: none;
}
.tt {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.tt th,
.tt td {
  padding: var(--space-2);
  border: var(--rule);
  vertical-align: top;
  text-align: left;
}
.tt thead th {
  font-weight: 500;
  text-align: center;
}
.tt tbody th {
  width: 70px;
  font-weight: 400;
}
.tt__subject,
.tt__room {
  display: block;
}
.tt__room {
  color: var(--steel);
  font-size: 0.875rem;
}
.tt__clash {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}
.tt__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875rem;
  font-weight: 600;
}
.tt__flag::before,
.tt__reason::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
}
.tt__reason {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}
.tt__remove {
  font-size: 0.75rem;
  color: var(--steel);
}
.tt__add {
  display: block;
  margin-top: var(--space-6);
}
.tt__fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.tt__audience {
  border: 0;
  margin: 0;
  padding: 0;
}
.tt__audience .segments {
  flex-wrap: wrap;
}
.tt__recent {
  margin-top: var(--space-6);
}
@media (max-width: 1100px) {
  .tt {
    min-width: 640px;
  }
  .tt__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Screen 68: school calendar */
.cal__add {
  display: block;
  margin: var(--space-5) 0;
}
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
}
.cal__nav .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--mist);
  text-decoration: none;
  font-size: 1.25rem;
}
.cal {
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.cal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: auto;
  min-height: 84px;
  padding-bottom: var(--space-2);
  border-top: var(--rule);
}
.cal__weekdays {
  min-height: 0;
  padding: var(--space-3) 0;
  border-top: 0;
  color: var(--steel);
  text-align: center;
}
.cal__day {
  display: grid;
  grid-row: 1; /* the seven days fill the first row in order; bars go below */
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-left: var(--rule);
}
.cal__day:first-child {
  border-left: 0;
}
.cal__date {
  justify-self: start;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
}
.cal__date.is-today {
  background: var(--ink);
  color: #fff;
}
.cal__event {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  font-size: 0.875rem;
}
.cal__event::before {
  content: "•";
}
.cal__bar {
  margin: var(--space-1) var(--space-2) 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.cal__bar--assessment {
  background: var(--ink);
  color: #fff;
}
.cal__bar--break,
.cal__bar--event {
  background: var(--mist);
  color: var(--ink);
}
.cal__note {
  margin-top: var(--space-4);
}
@media (max-width: 599px) {
  .cal__day {
    padding: var(--space-1);
  }
  .cal__event {
    display: none; /* phones show the day; the list below gives the events */
  }
  .cal__bar {
    margin: var(--space-1) 0 0;
    padding: 2px var(--space-1);
    font-size: 0.75rem;
  }
}
.cal__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Screen 61: notification centre */
.notes {
  max-width: 720px;
  margin-top: var(--space-5);
}
.notes__group {
  padding-bottom: var(--space-2);
  border-bottom: var(--rule);
  color: var(--steel);
}
.notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notes__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.notes__unread {
  width: 10px;
  font-size: 1.5rem;
  line-height: 1;
}
.notes__text {
  display: grid;
  flex: 1;
}
.notes__detail {
  color: var(--steel);
  font-size: 0.9375rem;
}
.notes__read {
  max-width: 720px;
  margin-top: var(--space-5);
}
.topbar__bell {
  position: relative;
}
.topbar__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal); /* look here: something unread */
}

/* Screen 62: message previews */
.previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.preview {
  padding: var(--space-4);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.preview .heading {
  margin: 0;
}
.preview__bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--mist);
  overflow-wrap: anywhere;
}
.preview__email {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--paper);
  font: 0.875rem/1.5 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Screen 55: messages */
.inbox {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  margin-top: var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.inbox > :first-child {
  padding: var(--space-3);
  border-right: var(--rule);
}
.inbox__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.inbox__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.inbox__item > span:last-child {
  display: grid;
}
.inbox__item.is-selected {
  background: var(--mist);
}
.chat {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}
.chat__title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--rule);
}
.chat__messages {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat__message {
  display: grid;
  justify-items: start;
  max-width: 75%;
}
.chat__message.is-mine {
  justify-self: end;
  justify-items: end;
}
.chat__meta {
  color: var(--steel);
  font-size: 0.875rem;
}
.chat__bubble {
  margin: var(--space-1) 0 0;
  padding: var(--space-3) var(--space-4);
  border: var(--rule);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.is-mine .chat__bubble {
  border-color: var(--mist);
  background: var(--mist);
}
.chat__reply {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.chat__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.chat__row textarea {
  flex: 1;
  min-height: 48px;
  padding: 10px var(--space-4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font: inherit;
}
@media (max-width: 899px) {
  .inbox {
    grid-template-columns: minmax(0, 1fr);
  }
  .inbox > :first-child {
    border-right: 0;
    border-bottom: var(--rule);
  }
  .chat__message {
    max-width: 90%;
  }
}

/* Role overview pages (screens 53, core-01, admin Overview) */
.next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--mist);
}
.next__what {
  display: grid;
}
.next__label {
  color: var(--steel);
  font-size: 1.5rem;
  font-weight: 600;
}
.next__title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.next__when {
  font-size: 1.5rem;
}
.next__action {
  flex: none;
}
.today {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.today--learner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.today__panel {
  padding: var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.today__panel > .title {
  margin: 0 0 var(--space-4);
}
.today__table th {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.attention {
  margin: 0;
  padding: 0;
  list-style: none;
}
.attention__item {
  display: grid;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-top: var(--rule);
  position: relative;
}
.attention__item::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) + 0.5em);
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal);
}
.attention__what {
  font-size: 1.25rem;
  font-weight: 600;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-5) 0 0;
  padding-bottom: var(--space-4);
  border-bottom: var(--rule);
}
.stats__item {
  padding: 0 var(--space-5);
  border-left: var(--rule);
}
.stats__item:first-child {
  padding-left: 0;
  border-left: 0;
}
.stats dt {
  color: var(--steel);
  font-size: 1.25rem;
}
.stats dd {
  margin: 0;
}
.stats__big {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
}
.registers {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.registers__item {
  display: grid;
  padding: var(--space-3) 0;
  border-top: var(--rule);
}
@media (max-width: 900px) {
  .today,
  .today--learner,
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats__item {
    padding: var(--space-3) 0;
    border-left: 0;
  }
  .next {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
  }
  .next__title {
    font-size: 2rem;
  }
  .next .chip {
    align-self: flex-start;
  }
  .today__panel {
    padding: var(--space-4);
  }
  .today__table {
    font-size: 1rem;
  }
  .today__table th,
  .today__table td {
    padding-left: 0;
  }
}

/* Assessments (core-06) and their setup */
.assess__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--mist);
}
.assess__facts {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.assess__facts > div {
  padding: 0 var(--space-4);
  border-left: 1px solid var(--field-border);
}
.assess__facts > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.assess__facts dt {
  color: var(--steel);
}
.assess__facts dd {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  white-space: nowrap;
}
.assess__submit {
  flex: none;
}
.assess__other {
  margin: var(--space-3) 0 0;
}
.assess {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.assess__sheet {
  font-size: 1.125rem;
}
.assess__sheet th {
  padding-bottom: var(--space-2);
}
.assess__sheet td {
  height: 40px;
}
.assess__cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.assess__input {
  width: 120px;
  height: 30px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.125rem;
  text-align: center;
}
.assess__input.input--invalid {
  border-color: var(--signal);
}
.assess__missing {
  min-height: 0;
  padding: 0;
}
.assess__summary {
  padding-left: var(--space-5);
  border-left: var(--rule);
}
.assess__summary dl {
  margin: 0;
}
.assess__summary dl > div {
  padding: var(--space-3) 0;
  border-bottom: var(--rule);
}
.assess__summary dt {
  color: var(--steel);
  font-size: 1.25rem;
}
.assess__summary dd {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.2;
}
.assess__summary dd + dd {
  /* a note under the figure (for example how many payments) */
  font-size: 0.9375rem;
  line-height: 1.4;
}
.assess__reason {
  max-width: 560px;
  margin-top: var(--space-4);
}
.setup .panel-form {
  display: grid;
  align-items: start;
  justify-items: start;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.setup .panel-form .admin-field,
.setup .panel-form input,
.setup .panel-form select {
  width: 100%;
}
.setup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 900px) {
  .assess__bar {
    flex-direction: column;
    align-items: stretch;
  }
  .assess__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .assess__facts > div {
    padding: 0;
    border-left: 0;
  }
  .assess,
  .setup {
    grid-template-columns: minmax(0, 1fr);
  }
  .assess__summary {
    padding-left: 0;
    border-left: 0;
  }
  .assess__input {
    width: 80px;
  }
  .assess__facts dd {
    white-space: normal;
  }
  .assess__sheet th:first-child,
  .assess__sheet td:first-child {
    display: none;
  }
  .assess__sheet td,
  .assess__sheet th {
    padding: 0 var(--space-2) 0 0;
  }
  .assess__cell {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }
}

/* Results approval (screen 59) */
.approve__choose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0;
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.approve__choose select {
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.approve__table thead th {
  padding-top: var(--space-3);
  background: var(--mist);
  color: var(--ink);
}
.approve__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.approve__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--steel);
  font-size: 1.25rem;
}
@media (max-width: 900px) {
  .approve__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .approve__table {
    font-size: 1rem;
  }
  .approve__table th:nth-child(2),
  .approve__table td:nth-child(2) {
    display: none;
  }
}

/* Results (screens 56, core-04) */
.results__head {
  align-items: flex-start;
}
.terms {
  display: flex;
  flex-wrap: wrap; /* the online-payments filters are wider than a phone */
  padding: 4px;
  border: var(--rule);
  border-radius: var(--radius);
}
.terms__tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1.25rem;
  text-decoration: none;
}
.terms__tab.is-active {
  background: var(--ink);
  color: #fff;
}
.results {
  margin-top: var(--space-5);
}
.results__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-5);
}
.results__mark,
.results__num {
  text-align: center;
}
.results__table td {
  height: 52px;
}
.results__table th.results__mark {
  font-size: 1rem;
}
.results__summary {
  margin: 0;
  padding-left: var(--space-5);
  border-left: var(--rule);
}
.results__summary > div {
  padding: var(--space-3) 0;
  border-bottom: var(--rule);
}
.results__summary dt {
  color: var(--steel);
  font-size: 1.25rem;
}
.results__summary dd {
  margin: 0;
  font-size: 3.5rem;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .results__head {
    flex-direction: column;
  }
  .results__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .results__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    order: -1;
    padding: var(--space-3);
    border: var(--rule);
    border-radius: var(--radius);
    text-align: center;
  }
  .results__summary > div {
    border-bottom: 0;
  }
  .results__summary dt {
    font-size: 0.875rem;
  }
  .results__summary dd {
    font-size: 1.75rem;
  }
  .results__table {
    font-size: 1rem;
  }
  .results__table.is-complete .results__mark {
    display: none;
  }
  .terms__tab {
    font-size: 1rem;
  }
}

/* Printed sheets (fee receipts and payment slips): A4 on paper, the same sheet on screen */
.results__card {
  margin: var(--space-4) 0 0;
}
.card {
  max-width: 210mm;
  margin: var(--space-5) 0 0;
  padding: var(--space-6);
  border: var(--rule);
  background: var(--surface);
}
.card__school {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--steel);
}
.card__crest {
  width: 120px;
  height: auto;
}
.card__name {
  max-width: 8em;
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.card__title {
  margin: var(--space-4) 0;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.card__table {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
  font-size: 1.125rem;
}
.card__table th,
.card__table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--steel);
  text-align: left;
}
.card__facts th {
  width: 30%;
  background: var(--mist);
  font-weight: 400;
}
.card__signs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: 56px;
  color: var(--steel);
  text-align: center;
}
.card__signs span {
  padding-top: var(--space-2);
  border-top: 1px solid var(--steel);
}
@media (max-width: 600px) {
  .card {
    padding: var(--space-3);
  }
  .card__crest {
    width: 64px;
  }
  .card__name {
    font-size: 1.5rem;
  }
  .card__title {
    font-size: 2rem;
  }
  .card__table {
    font-size: 0.875rem;
  }
  /* Round 44: at 48px the amount was wider than its cell at 320 px, so the table scrolled */
  .card__table .card__amount {
    font-size: 1.75rem;
  }
  .card__table th,
  .card__table td {
    padding: var(--space-1);
  }
}
@media print {
  .card {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  @page {
    size: A4;
    margin: 14mm;
  }
}

/* Academic record (screen 67) */
.record__table {
  margin-top: var(--space-5);
}
@media (max-width: 600px) {
  .record__table {
    font-size: 1rem;
  }
  .record__table th,
  .record__table td {
    padding: 0 var(--space-2);
  }
}

/* Homework packs (core-18, core-19) */
.hw__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.hw__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--mist);
}
.hw__bar .admin-field {
  margin: 0;
}
.hw__bar input {
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.hw__fact {
  display: grid;
}
/* Round 44: a basis, not a min-width (the app's min-width: 0 on every div overrode it, so with
   200% text the title box shrank to 26px); in rem, so larger text puts it on its own line */
.hw__fact--wide {
  flex: 1 1 12.5rem;
}
.hw__fact--wide input {
  width: 100%;
}
.hw__label {
  color: var(--steel);
}
.hw__value {
  font-size: 1.375rem;
  font-weight: 600;
}
.hw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.hw__tasks {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw__task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--rule);
}
.hw__tasks--pupil .hw__task {
  grid-template-columns: auto minmax(0, 1fr) auto 190px;
  align-items: center;
}
.hw__what {
  display: grid;
  gap: 2px;
}
.hw__what strong {
  font-size: 1.375rem;
}
.hw__min {
  font-size: 1.25rem;
}
.hw__status {
  display: grid;
  justify-items: start;
  gap: 4px;
}
.hw__edit,
.hw__add {
  margin-top: var(--space-2);
}
.hw__counts {
  margin-top: var(--space-4);
  color: var(--steel);
  font-size: 1.25rem;
  line-height: 1.8;
}
.hw__progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.hw__bars {
  display: flex;
  gap: 6px;
}
.hw__seg {
  width: 72px;
  height: 14px;
  border-radius: 7px;
  background: var(--mist);
}
.hw__seg.is-done {
  background: var(--ink);
}
.hw__next {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}
.hw__new {
  display: grid;
  justify-items: start;
  max-width: 480px;
}
@media (max-width: 900px) {
  .hw {
    grid-template-columns: minmax(0, 1fr);
  }
  .hw__tasks--pupil .hw__task {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hw__tasks--pupil .hw__min,
  .hw__tasks--pupil .hw__status {
    grid-column: 2;
  }
  .hw__seg {
    width: 40px;
  }
  .hw__next .btn-primary {
    width: 100%;
  }
}

/* Photos (core-22, core-23) */
.photo__task {
  margin: var(--space-3) 0 var(--space-4);
  color: var(--steel);
  font-size: 1.375rem;
}
.photo__task strong {
  color: var(--ink);
}
.photo {
  max-width: 720px;
  margin: 0 auto;
}
.photo__drop {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  min-height: 260px;
  border: 2px dashed var(--field-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.photo__icon {
  width: 96px;
  height: 96px;
}
.photo__icon .icon {
  width: 48px;
  height: 48px;
}
.photo__choose {
  font-size: 1.25rem;
}
.photo__input {
  margin-top: var(--space-3);
  max-width: 100%;
}
.photo__tips {
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
  color: var(--steel);
  font-size: 1.25rem;
}
.photo__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.photolog__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  padding-bottom: var(--space-4);
  border-bottom: var(--rule);
}
.photolog__filters > div {
  display: grid;
  gap: 4px;
}
.photolog__filters select {
  min-width: 200px;
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.photolog__export {
  margin-left: auto;
}
.photolog__two {
  display: grid;
}
@media (max-width: 900px) {
  .photolog__filters select {
    min-width: 0;
    width: 100%;
  }
  .photolog__filters > div {
    flex: 1 1 100%;
  }
  .photolog__export {
    margin-left: 0;
  }
  .photolog__table {
    font-size: 1rem;
  }
}

/* Checking homework (core-20) and grown-up checks (core-21) */
.check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.check__scroll {
  position: relative; /* keeps visually hidden labels inside the scrolling box */
  overflow-x: auto;
}
.check__grid {
  width: 100%;
  border: var(--rule);
  border-radius: var(--radius);
  border-collapse: collapse;
  font-size: 1.125rem;
}
.check__grid thead th {
  padding: var(--space-3);
  background: var(--mist);
  color: var(--steel);
  font-weight: 400;
}
.check__grid th[scope="row"] {
  padding: 0 var(--space-3);
  font-weight: 400;
  text-align: left;
}
.check__grid td {
  height: 50px;
  border-top: var(--rule);
  text-align: center;
}
.check__cell {
  display: inline-grid;
  place-items: center;
  width: 72px;
  min-width: 44px; /* round 39: a 44 px target on a phone too */
  min-height: 44px;
  border-radius: var(--radius);
}
.check__cell.is-chosen {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.check__dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  vertical-align: middle;
}
.check__dot.is-done {
  background: var(--ink);
}
.check__dot.is-waiting {
  border-color: var(--steel);
  background: var(--steel);
}
.check__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--steel);
}
.check__side {
  padding-left: var(--space-5);
  border-left: var(--rule);
}
.check__photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--mist);
}
.check__verdict {
  display: flex;
}
.check__verdict .segments__option {
  flex: 1;
}
.check__verdict .segments__option span {
  justify-content: center;
  width: 100%;
  font-size: 1.125rem;
}
.check__form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.check__form input[type="text"],
.check__form input:not([type]) {
  height: 48px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font: inherit;
}
.grownup {
  margin-bottom: var(--space-6);
}
.grownup__box {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.grownup__task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--rule);
}
@media (max-width: 900px) {
  .check {
    grid-template-columns: minmax(0, 1fr);
  }
  .check__side {
    padding-left: 0;
    border-left: 0;
  }
  .check__grid {
    font-size: 0.875rem;
  }
  .check__cell {
    width: 44px;
  }
  .grownup__task {
    grid-template-columns: minmax(0, 1fr);
  }
}
.grownup__next {
  margin-top: var(--space-4);
}
.grownup__later {
  text-align: center;
}

/* Test builder (screen 58) */
.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.builder__q {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.builder__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.builder__n {
  margin: 0;
  font-size: 1.25rem;
}
.builder__chip {
  margin-left: auto;
}
.builder__text {
  margin: var(--space-3) 0;
  font-size: 1.375rem;
}
.builder__choices {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.builder__choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--rule);
  border-radius: var(--radius);
}
.builder__choice.is-correct {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.builder__mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.builder__mark .icon {
  width: 16px;
  height: 16px;
}
.builder__settings {
  align-self: start;
  padding: var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.builder__form {
  display: grid;
  gap: var(--space-2);
}
.builder__form input:not([type="checkbox"]),
.builder__form select,
.builder__reuse select {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.builder__facts {
  margin: var(--space-4) 0;
}
.builder__facts dt {
  color: var(--steel);
}
.builder__facts dd {
  margin: 0 0 var(--space-3);
  font-size: 1.25rem;
}
.builder__total {
  font-size: 3rem !important;
}
.builder__reuse {
  display: grid;
  gap: var(--space-2);
  max-width: 560px;
  margin-top: var(--space-4);
}
@media (max-width: 900px) {
  .builder {
    grid-template-columns: minmax(0, 1fr);
  }
  .builder__settings {
    order: -1;
  }
}

/* Sitting a test (core-03, core-15) */
.testbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: var(--rule);
  background: var(--surface);
}
.testbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.25rem;
  font-weight: 600;
}
.testbar .crest,
.testbar .crest__img {
  width: 56px;
  height: auto;
}
.sit__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sit__bar span:first-child {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right, var(--ink) var(--done), var(--mist) var(--done));
}
.testbar__learn {
  color: var(--steel);
  font-weight: 400;
}
.testbar__who {
  display: grid;
  justify-items: end;
}
.testpage {
  padding: var(--space-5) var(--space-6);
}
.sit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--space-6);
}
.sit__count {
  margin: 0;
  color: var(--steel);
}
.sit__question {
  margin: var(--space-5) 0;
  font-family: var(--font-mono);
  font-size: 2.5rem;
  line-height: 1.2;
}
.sit__question--essay {
  font-family: inherit;
  font-size: 2rem;
  font-weight: 600;
}
.sit__choices {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.sit__choice {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  padding: 0 var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  font-size: 1.5rem;
  cursor: pointer;
}
.sit__choice input {
  width: 26px;
  height: 26px;
  accent-color: var(--ink);
}
.sit__choice:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.sit__letter {
  color: inherit;
  opacity: 0.8;
}
.sit__essay {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1.125rem;
}
.sit__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
}
.sit__side {
  padding-left: var(--space-5);
  border-left: var(--rule);
}
.sit__clock {
  display: grid;
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--mist);
}
.sit__time {
  font-size: 3.5rem;
  line-height: 1.1;
}
.sit__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}
.sit__cell {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 40px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--steel-ink);
  font: inherit;
  text-decoration: none;
}
.sit__key .sit__cell {
  min-height: 20px;
  vertical-align: middle;
}
.sit__cell.is-answered {
  background: var(--ink);
  color: #fff;
}
.sit__cell.is-current {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}
.testlist {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  border: var(--rule);
  border-radius: var(--radius);
}
.testlist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.testlist__item + .testlist__item {
  border-top: var(--rule);
}
.testlist__what {
  display: grid;
}
.testlist__what strong {
  font-size: 1.25rem;
}
@media (max-width: 900px) {
  .testbar,
  .testpage {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
  .testbar__brand > span:last-child {
    display: none;
  }
  .sit {
    grid-template-columns: minmax(0, 1fr);
  }
  .sit__side {
    order: -1;
    padding-left: 0;
    border-left: 0;
  }
  .sit__question {
    font-size: 1.75rem;
  }
  .sit__choice {
    font-size: 1.125rem;
  }
  .testlist__item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .testlist__when,
  .testlist__action {
    grid-column: 2;
  }
}

/* Typed essays (core-15) and teacher marking (core-16) */
.sit__essaybox {
  position: relative;
}
.sit__words {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
}
.marking__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.marking__arrow {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 48px;
  border: var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
}
.marking__arrow:first-child .icon {
  transform: rotate(180deg);
}
.marking__arrow.is-off {
  background: var(--mist);
  color: var(--steel);
}
.marking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.marking__script {
  padding: var(--space-4) var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.marking__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--rule);
}
.marking__who .title {
  margin: 0;
}
.marking__text {
  font-size: 1.125rem;
  line-height: 1.6;
}
.marking__side {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-left: var(--space-5);
  border-left: var(--rule);
}
.marking__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: var(--rule);
}
.marking__total {
  display: grid;
  margin: var(--space-3) 0;
}
.marking__total .mono {
  font-size: 2.75rem;
}
@media (max-width: 900px) {
  .marking {
    grid-template-columns: minmax(0, 1fr);
  }
  .marking__side {
    padding-left: 0;
    border-left: 0;
  }
}
.assign__tabs {
  display: inline-flex;
  margin: var(--space-4) 0;
}
.assign__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--signal);
}

/* Fees (screens 10, 50) */
.fees__who {
  display: grid;
}
.fees__table tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--ink);
}
.fees__lines {
  margin: var(--space-3) 0;
}
.fees__lines > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 0;
}
.fees__lines dt {
  color: var(--steel);
}
.fees__panel .fees__lines dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.fees__panel .fees__lines > div {
  padding: 4px 0;
  border-bottom: 0;
}
.fees__panel .fees__lines dt {
  font-size: 1rem;
}
.fees__sum {
  margin-top: var(--space-2);
  border-top: var(--rule);
  padding-top: var(--space-2) !important;
}
.notice-line {
  margin: var(--space-3) 0;
  font-weight: 600;
}
.resolve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.resolve select,
.resolve input {
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}
.pay__table {
  font-size: 1rem;
}
.pay__table td.mono,
.pay__table td.num {
  white-space: nowrap;
}
.pay__head {
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 600px) {
  .page-tabs {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }
  .page-tabs__tab {
    font-size: 1.125rem;
  }
}

/* Guardian fees (39), payment slip (46), receipt (47) */
.famfees__other { list-style: none; padding: 0; margin: var(--space-3) 0 0; border-top: var(--rule); }
.famfees__other-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-bottom: var(--rule); }
.famfees__other-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.famfees {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.famfees > div {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}
.famfees__total th,
.famfees__total td {
  background: var(--mist);
  font-weight: 700;
}
.famfees__total th {
  font-family: inherit;
  font-size: 1.125rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.famfees__summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.famfees__summary dt {
  color: var(--steel);
}
.famfees__summary dd {
  margin: 0;
  font-size: 2.25rem;
}
.card__amount {
  font-size: 3rem;
  font-weight: 700;
}
.card__quote {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  font-weight: 700;
  text-align: center;
}
.card__dates {
  display: flex;
  justify-content: space-between;
  margin: var(--space-3) 0;
}
.card__stamp {
  height: 120px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  color: var(--steel);
}
.card__signs--one {
  grid-template-columns: minmax(0, 0.5fr);
  text-align: left;
}
@media (max-width: 900px) {
  .famfees {
    grid-template-columns: minmax(0, 1fr);
  }
  .famfees__summary dd {
    font-size: 1.5rem;
  }
}

/* Account settings (screen 78) */
.account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.account__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--rule);
}
.account__row .title {
  margin: 0 0 var(--space-1);
}
.account__value {
  margin: 0;
  font-size: 1.375rem;
}
.account__side {
  padding-left: var(--space-6);
  border-left: var(--rule);
}
@media (max-width: 900px) {
  .account {
    grid-template-columns: minmax(0, 1fr);
  }
  .account__side {
    padding-left: 0;
    border-left: 0;
  }
}

/* Help centre (75), contact (76), what's new (77), first-run (14) */
.help__search {
  margin: var(--space-4) 0;
}
.help__box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding: 0 var(--space-4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
}
.help__box input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.25rem;
}
.help__topics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.help__topic {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius);
  color: var(--steel-ink);
  font-size: 1.25rem;
  text-align: center;
  text-decoration: none;
}
.help__topic.is-active {
  background: var(--mist);
  color: var(--ink);
}
.help__guide {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.help__steps {
  max-width: 760px;
  font-size: 1.25rem;
  line-height: 1.6;
}
.help__step + .help__step {
  margin-top: var(--space-3);
}
.support__body {
  margin: var(--space-2) 0;
}
@media (max-width: 900px) {
  .help__topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .help__topic {
    font-size: 1rem;
  }
}

/* Whole-page states (screen 79) */
.state__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
}
.state__brand .crest__img {
  width: 48px;
  height: auto;
}
.state__learn {
  color: var(--steel);
  font-size: 1.5rem;
}
.state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 560px;
  margin: var(--space-6) auto;
  padding: 0 var(--space-4);
  text-align: center;
}
.state__icon {
  display: inline-grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 20px;
  background: var(--mist);
}
.state__icon .icon {
  width: 56px;
  height: 56px;
}
.state__title {
  margin: var(--space-3) 0 0;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.state__text {
  margin: 0;
  color: var(--steel);
  font-size: 1.25rem;
}
.state__action {
  min-width: 240px;
  margin-top: var(--space-3);
}

/* Lessons (07), resources (70) */
.lesson__drop {
  min-height: 120px;
  padding: var(--space-3);
  text-align: center;
}
.lesson__files li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.inline-form {
  display: inline;
}
.lesson__storage {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.lesson__bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right, var(--ink) var(--done), var(--mist) var(--done));
}

/* Reports (screen 69) */
.reports {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.reports > section + section {
  padding-left: var(--space-6);
  border-left: var(--rule);
}
.bars {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
}
.bars th {
  width: 3.5em;
  color: var(--steel);
  font-weight: 400;
  text-align: left;
}
.bars td {
  padding: var(--space-2) 0;
}
.bars td:last-child {
  width: 8em;
  padding-left: var(--space-3);
  text-align: right;
  white-space: nowrap;
}
.bars__bar {
  display: block;
  width: var(--size);
  height: 36px;
  background: var(--ink);
}
@media (max-width: 900px) {
  .reports {
    grid-template-columns: minmax(0, 1fr);
  }
  .reports > section + section {
    padding-left: 0;
    border-left: 0;
  }
  .bars__bar {
    height: 24px;
  }
}

/* The public website's other pages (screen 74, core-13); the header, footer and home page are
   in site.css (round 23) */
.site {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6);
}
.site__section {
  margin-top: var(--space-5);
}
.site__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site__list li {
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--rule);
  font-size: 1.25rem;
}
@media (max-width: 600px) {
  .site {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
}

/* Small steel text on mist must use --steel-ink (4.98:1; --steel is 4.04:1) (task 10.1) */
.assess__facts dt,
.hw__label,
.next__label,
.sit__clock .muted,
.check__grid thead th,
.inbox__item.is-selected .muted,
.famfees__total .muted,
.card__facts th {
  color: var(--steel-ink);
}
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
}
.skip-link:focus {
  top: var(--space-2);
}

/* Reopening a submitted sheet: screen 59 (admin) and the score sheet (the teacher who submitted). */
.approve__reopen { margin-top: 6px; }
.approve__reopen summary { cursor: pointer; display: inline; }
.approve__reopen form { display: grid; gap: 6px; margin-top: 6px; max-width: 280px; }
.assess__reopen { margin-top: 32px; max-width: 480px; }

/* Term report, online (report design 01 and 02): the frozen record, a table on desktop and
   expandable subjects on phones. */
.report__who { margin-top: var(--space-2); }
.report__class .class-name__level { color: var(--steel); }
.report__choose { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.report__choose .admin-field { margin: 0; min-width: 260px; }
.report__details { margin-top: var(--space-5); border-top: var(--rule); border-bottom: var(--rule); padding: var(--space-3) 0; }
.report__details summary { cursor: pointer; }
.report__facts { margin-top: var(--space-3); }
.report__stats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: var(--space-5) 0 var(--space-4); }
.report__stats dt { color: var(--steel); font-size: 0.875rem; }
.report__stats dd { margin: 0; }
.report__big { font-size: 1.75rem; font-weight: 700; }
.report__table { margin-top: var(--space-3); }
.report__subjects { display: none; list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.report__subjects li { border-bottom: var(--rule); }
.report__subjects summary { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-3) 0; cursor: pointer; }
.report__subject { flex: 1; font-weight: 600; }
.report__parts div { display: flex; justify-content: space-between; padding: 4px 0; }
.report__parts dd { margin: 0; }
.report__year { margin-top: var(--space-6); }
.report__qualities { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); margin-top: var(--space-3); }
.report__quality { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: var(--rule); }
.report__remarks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin: var(--space-6) 0 var(--space-5); padding-top: var(--space-5); border-top: var(--rule); }
@media (max-width: 760px) {
  .report__table { display: none; }
  .report__subjects { display: block; }
  .report__download { width: 100%; text-align: center; }
  .report__choose .admin-field { min-width: 0; width: 100%; }
  .report__qualities, .report__remarks { grid-template-columns: 1fr; }
  .report__stats { display: grid; grid-template-columns: 1fr 1fr; }
  .report__class .class-name__level { display: block; font-size: 1rem; }
}
.report__table { font-size: 0.9375rem; }
.report__table th { font-size: 0.875rem; }
.report__table td { height: 52px; }
.report__table th { padding-bottom: 12px; }
.report__title { font-size: 1.375rem; margin-top: var(--space-5); }
.report__stats dt { font-size: 1rem; }
.report__big { font-size: 2rem; }

/* Report workflow pages (report design 03 to 06) */
.qualities__progress { font-size: 1.5rem; margin: var(--space-5) 0 var(--space-3); }
.qualities__grid { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.qualities__grid thead th { color: var(--steel); font-weight: 400; padding: 0 0 var(--space-3); text-align: center; }
.qualities__grid thead th:first-child { text-align: left; }
.qualities__grid tbody th { text-align: left; font-weight: 400; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-top: var(--rule); }
.qualities__grid td { text-align: center; border-top: var(--rule); padding: var(--space-2) 2px; }
.qualities__name { display: block; }
.qualities__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.qualities__input { width: 44px; height: 44px; text-align: center; border: 1px solid var(--field-border, #848e98); border-radius: 8px; font-size: 1.125rem; background: var(--surface); }
.qualities__key { columns: 2; list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-3); }
.qualities__key li { padding: 6px 0; color: var(--steel); }
.reports__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
.reports__actions { display: flex; align-items: center; gap: var(--space-4); }
.reports__action { min-width: 280px; }
.remarks { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.remarks__row { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: var(--rule); }
.remarks__name { font-weight: 700; margin: 0 0 4px; }
.remarks__text { width: 100%; }
.remarks__waiting { margin: 0; padding: var(--space-4); border: var(--rule); border-radius: 8px; color: var(--steel); }
.remarks__box select { width: 100%; }
.readiness td { vertical-align: middle; }
.readiness__note, .readiness__attention { display: inline-flex; align-items: center; gap: 8px; }
.readiness__note { display: flex; color: var(--steel); font-size: 0.875rem; }
.readiness__term { margin: 6px 0 0; font-size: 1.125rem; }
@media (max-width: 760px) {
  .qualities__grid thead { display: none; }
  .qualities__grid, .qualities__grid tbody, .qualities__grid tr { display: block; }
  .qualities__grid tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: var(--space-4) 0; border-top: var(--rule); }
  .qualities__grid tbody th { grid-column: 1 / -1; border: 0; padding: 0; }
  .qualities__grid td { border: 0; padding: 0; text-align: left; }
  .qualities__cell { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .qualities__label { position: static; width: auto; height: auto; clip: auto; font-size: 0.9375rem; }
  .qualities__key { columns: 1; }
  .remarks__row { grid-template-columns: 1fr; gap: var(--space-3); }
  .reports__action, .reports__actions { width: 100%; min-width: 0; }
  .reports__actions { flex-direction: column-reverse; }
}
.readiness .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); flex: none; }
.readiness__note .dot { background: var(--steel); }
.remarks__row { grid-template-columns: 240px 1fr; }
.remarks__who .chip { white-space: nowrap; }
.qualities__grid abbr { text-decoration: none; }
.qualities__key { columns: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
@media (max-width: 760px) {
  .remarks__row { grid-template-columns: 1fr; }
  .qualities__key { grid-template-columns: 1fr; }
  .readiness thead { display: none; }
  .readiness, .readiness tbody, .readiness tr, .readiness td { display: block; height: auto; }
  .readiness tr { padding: var(--space-3) 0; border-bottom: var(--rule); }
  .readiness td { border: 0; padding: 4px 0; }
  .readiness td:nth-child(2)::before { content: "Pupils "; color: var(--steel); font-family: var(--font-words, "Geist"); }
  .readiness td:nth-child(3)::before { content: "Scores approved "; color: var(--steel); font-family: "Geist", sans-serif; }
  .readiness td:nth-child(4)::before { content: "Ratings complete "; color: var(--steel); font-family: "Geist", sans-serif; }
  .readiness td .btn-primary { width: 100%; }
}
.remarks__text { min-height: 84px; }
.readiness__attention { white-space: nowrap; }
.settings__rename { display: flex; gap: var(--space-2); align-items: center; flex: 1; }
.settings__rename input { flex: 1; min-width: 0; }

/* Admin Overview (staff batch 1, 01) */
.overview__attention { margin-top: var(--space-5); }
.overview__list { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.overview__row { display: grid; grid-template-columns: 14px 1fr auto 200px; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: var(--rule); }
.overview__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.overview__count { font-weight: 700; text-align: right; }
.overview__empty { text-align: center; padding: var(--space-6) 0; }
.overview__empty .state__icon { margin: 0 auto var(--space-4); }
.overview__panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
.overview__panels > section, .overview__registers { border-top: var(--rule); padding-top: var(--space-5); }
.overview__money { display: flex; gap: var(--space-6); margin: var(--space-4) 0; }
.overview__money dt { color: var(--steel); }
.overview__money dd { margin: 0; font-size: 2rem; font-weight: 700; }
.overview__registers { margin-top: var(--space-6); }
@media (max-width: 760px) {
  .overview__row { grid-template-columns: 14px 1fr auto; }
  .overview__link { grid-column: 2 / -1; }
  .overview__panels { grid-template-columns: 1fr; }
  .overview__money { flex-direction: column; gap: var(--space-3); }
}
.overview__row { font-size: 1.1875rem; }

/* Terms, assessments and grading (staff batch 1, 02) */
.setup__crumbs { margin: var(--space-2) 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--rule); }
.setup2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-5); }
.setup2__table { margin-top: var(--space-3); }
.setup2__inline { display: inline; margin-left: var(--space-2); }
.setup2__change { margin-top: var(--space-4); }
.setup2__change summary { cursor: pointer; display: inline; }
.setup2__scale { margin-top: var(--space-6); }
@media (max-width: 760px) { .setup2 { grid-template-columns: 1fr; } }

/* Teacher assessments (staff batch 1, 03) */
.assess__tabs { display: flex; gap: var(--space-5); margin: var(--space-4) 0 0; padding-bottom: var(--space-3); border-bottom: var(--rule); }
.assess__tab { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.assess__tab.is-active { font-weight: 600; }
.assess__grid { margin-top: var(--space-4); }
@media (max-width: 760px) {
  .assess__grid thead { display: none; }
  .assess__grid, .assess__grid tbody, .assess__grid tr, .assess__grid td { display: block; height: auto; }
  .assess__grid tr { padding: var(--space-3) 0; border-bottom: var(--rule); }
  .assess__grid td { border: 0; padding: 2px 0; }
  .assess__grid td:first-child { font-weight: 600; }
}
.assess__grid .link-button.mono { font-family: var(--font-mono, "Geist Mono"), monospace; }
.report__choose { align-items: flex-start; }

/* List pages with a filter and one primary action (staff batch 1, 04 to 06) */
.list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.list-head__action { min-width: 280px; text-align: center; }
.hw__list { margin-top: var(--space-5); }
@media (max-width: 760px) {
  .list-head__action { width: 100%; min-width: 0; }
  .hw__list thead { display: none; }
  .hw__list, .hw__list tbody, .hw__list tr, .hw__list td { display: block; height: auto; }
  .hw__list tr { padding: var(--space-3) 0; border-bottom: var(--rule); }
  .hw__list td { border: 0; padding: 2px 0; }
  .hw__list td:first-child { font-weight: 600; }
}
.assess__tabs-row { display: flex; gap: var(--space-5); }
.list-head--end { justify-content: flex-end; margin-top: var(--space-4); }

/* Guardian messages (family batch 2, 07) */
.msg__new { margin-top: var(--space-4); max-width: 640px; }
.msg__threads { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-3); border-top: var(--rule); }
.msg__thread { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: var(--rule); }
.msg__body p { margin: 0 0 6px; }
.msg__name { font-weight: 700; font-size: 1.25rem; }
.msg__head { margin-top: var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--rule); }
.msg__conversation { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-4); }
.msg__item { max-width: 70%; padding: var(--space-4); border: var(--rule); border-radius: 12px; background: var(--paper); }
.msg__item.is-school { margin-left: 10%; background: var(--mist); border-color: transparent; }
.msg__item.is-school .muted { color: var(--steel-ink); } /* 4.5:1 on mist (round 13 a11y) */
.msg__meta { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-2); font-size: 0.9375rem; }
.msg__text { margin: 0; }
.msg__reply textarea { width: 100%; }
.msg__send { align-self: flex-end; min-width: 280px; }
@media (max-width: 760px) {
  .msg__thread { grid-template-columns: auto 1fr; }
  .msg__open { grid-column: 2; }
  .msg__item { max-width: 100%; }
  .msg__item.is-school { margin-left: 0; }
  .msg__meta { flex-direction: column; }
  .msg__send { width: 100%; min-width: 0; }
}

/* Student tests (family batch 2, 08) */
.tests__filter { margin: var(--space-4) 0 0; padding-bottom: var(--space-4); border-bottom: var(--rule); color: var(--steel); }
.tests__show { color: var(--steel); text-decoration: none; margin-right: 4px; }
.tests__show.is-active { color: var(--ink); font-weight: 700; margin-right: var(--space-4); }
.tests__confirm { margin-top: var(--space-4); padding: var(--space-5); border: 1px solid var(--signal); border-radius: var(--radius); background: var(--surface); }
.testlist { border: 0; }
.testlist__item { grid-template-columns: auto minmax(0, 1fr) auto 220px 200px; padding: var(--space-5) 0; }
.testlist__item + .testlist__item { border-top: var(--rule); }
.testlist__action { text-align: right; }
.testlist__action .btn-primary { display: inline-block; min-width: 180px; text-align: center; }
@media (max-width: 900px) {
  .testlist__item { grid-template-columns: auto minmax(0, 1fr); }
  .testlist__state, .testlist__when, .testlist__action { grid-column: 2; text-align: left; }
  .testlist__action .btn-primary { width: 100%; }
}

/* Test handed in (family batch 2, 09) */
.handed { max-width: 620px; margin: var(--space-6) auto 0; text-align: center; }
.handed .state__icon { margin: 0 auto var(--space-4); }
.handed__facts { margin: var(--space-5) 0; text-align: left; border-top: var(--rule); }
.handed__facts div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--rule); }
.handed__facts dt { color: var(--steel); }
.handed__facts dd { margin: 0; font-weight: 600; text-align: right; }
.handed__back { display: inline-block; min-width: 280px; }
.testlist__action .btn-primary { display: inline-flex; align-items: center; justify-content: center; }
.tests__filter { font-size: 1.125rem; }
.handed__back { display: inline-flex; justify-content: center; }

/* Lesson reading (family batch 2, 10) */
.lesson__by { margin: var(--space-4) 0 4px; font-size: 1.125rem; }
.lesson__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-5); }
.lesson__text { font-size: 1.25rem; line-height: 1.75; max-width: 34em; }
.lesson__files { border-left: var(--rule); padding-left: var(--space-5); }
.lesson__filelist { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.lesson__filelist li { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: var(--rule); }
.lesson__size { display: block; margin-top: 4px; }
.lesson__pager { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--rule); }
.lesson__pager p { margin: 0 0 4px; }
.lesson__next { text-align: right; }
@media (max-width: 760px) {
  .lesson__layout { grid-template-columns: 1fr; }
  .lesson__files { border-left: 0; padding-left: 0; border-top: var(--rule); padding-top: var(--space-4); }
  .lesson__text { font-size: 1.125rem; }
}

/* Fee structure (office batch 3, 11) */
.feeitems { margin-top: var(--space-4); }
@media (max-width: 480px) {
  /* four columns fit a phone with tighter cells: no sideways scroll (DESIGN.md section 4) */
  .feeitems th,
  .feeitems td { padding-inline: var(--space-2); }
}
.feeissue { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--rule); }
.feeconfirm { max-width: 640px; margin: var(--space-5) auto 0; }
.feeconfirm__go { display: inline-flex; justify-content: center; min-width: 280px; }
@media (max-width: 760px) { .feeconfirm__go { width: 100%; min-width: 0; } }
.feeconfirm__go { gap: 0.3em; }

/* Support requests (office batch 3, 12) */
.supreq__head { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.supreq__body { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--rule); }
.supreq__answer { margin-top: var(--space-5); max-width: none; }
.supreq__answer textarea { width: 100%; }
.supreq__go { align-self: flex-end; }

}

/* Staff clock-in (screens 82-87, docs/design/clock-in-v2). The ring is steel and the person
   ink; vermilion only on attention states (DESIGN.md section 7). */
.clock { max-width: 560px; }
.clock__title { margin-top: var(--space-3); }
.clock__time { font-size: 3.5rem; font-weight: 700; margin: var(--space-2) 0; }
.clock__zone { position: relative; width: 150px; height: 150px; margin: var(--space-5) auto var(--space-2); border: 2px solid var(--steel); border-radius: 50%; }
.clock__zone.is-attention { border-color: var(--signal); }
.clock__zone.is-blurred::after { content: ""; position: absolute; inset: -37px; border-radius: 50%; background: color-mix(in srgb, var(--mist) 70%, transparent); }
.clock__dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--ink); z-index: 1; }
.clock__dot.is-outside { left: calc(100% + 40px); }
.clock__zone-name { text-align: center; }
.clock__attention { display: flex; align-items: center; gap: 8px; }
.clock__attention .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.clock__button { display: inline-flex; justify-content: center; width: 100%; max-width: 420px; margin-top: var(--space-4); }
/* The design's "done" mark: a dark disc with a white tick (clock-in v2, state 04) */
.clock__done { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--surface); margin-top: var(--space-4); }
.clock__done .icon { width: 30px; height: 30px; stroke-width: 2.5; }
.clock__steps { padding-left: 1.25rem; }
.clock__approver { margin-top: var(--space-6); }
.cq { list-style: none; padding: 0; margin: var(--space-4) 0; border-top: var(--rule); }
.cq__item { display: grid; gap: 4px; padding: var(--space-3) 0; border-bottom: var(--rule); }
.cq__item.is-chosen { background: var(--mist); padding-left: var(--space-3); }
.cq__link { display: flex; justify-content: space-between; gap: var(--space-3); }
.cq__decide { margin-top: var(--space-5); max-width: 560px; }
.clock__home { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-4); }
.clock__again { display: block; margin: var(--space-3) auto 0; }
.staff-clock__count { font-size: 3rem; font-weight: 700; margin: var(--space-2) 0 0; }
.staff-clock__not { display: inline-flex; align-items: center; gap: 8px; }
.staff-clock__not .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.people__owed { display: inline-flex; align-items: center; gap: 6px; }
.people__owed .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
/* Steel text on a selected (mist) row: the darker steel keeps 4.5:1 (R5, axe). */
.is-selected .muted, .is-selected > .muted, .is-selected .class-name__level { color: var(--steel-ink); }

/* Screen 54 on a phone: the register is a list, not a sideways table. Each pupil is one row (ID
   and name), with Present, Late and Absent across the full width below, so nothing scrolls. */
@media (max-width: 600px) {
  .split__main:has(.register__table) {
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .split__main .register__table {
    min-width: 0;
  }
  .register__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .register__table,
  .register__table tbody,
  .register__table td {
    display: block;
  }
  .register__table tr {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--rule);
  }
  .register__table td {
    height: auto;
    padding: 0;
    border: 0;
  }
  .register__table td:last-child {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
  }
  .register__table .segments {
    display: flex;
    width: 100%;
  }
  .register__table .segments__option {
    flex: 1;
  }
  .register__table .segments__option span {
    justify-content: center;
    width: 100%;
  }
}

nav.pager { flex-wrap: wrap; align-items: baseline; }
nav.pager p { margin: 0; }

/* Wide admin tables on a phone (round 8): each row a labelled card, as the register is. The
   labels come from the table's own headings (static/js/stack-tables.js). */
@media (max-width: 600px) {
  .stack-host { overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
  table.data-table--stack.is-stackable { min-width: 0; width: 100%; }
  table.is-stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.is-stackable,
  table.is-stackable tbody,
  table.is-stackable tr,
  table.is-stackable td { display: block; }
  table.is-stackable tr { padding: var(--space-3) 0; border-bottom: var(--rule); }
  table.is-stackable td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); height: auto; padding: var(--space-1) 0; border: 0; text-align: right; }
  table.is-stackable td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--steel-ink); font-family: var(--font-sans); font-size: 0.875rem; text-align: left; }
  table.is-stackable td:first-child { display: block; text-align: left; font-weight: 600; }
  table.is-stackable td:first-child::before { content: none; }
  table.is-stackable td[data-label=""]::before,
  table.is-stackable td:not([data-label])::before { content: none; }
  table.is-stackable td:not([data-label]) { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .filters { flex-wrap: wrap; gap: var(--space-3); }
  .filters__search, .filters__class { flex: 1 1 100%; }
  .filters__class select { width: 100%; }
}
@media (max-width: 600px) {
  .split--people .filters__label { position: static; }
  .filters__class { width: auto; }
}
/* Inline forms (one row on a desktop) stack on a phone, so no field runs off the screen. */
@media (max-width: 600px) {
  .panel-form { flex-direction: column; align-items: stretch; }
  .panel-form > .link-button, .panel-form > .link { align-self: flex-start; }
}
.state__crest { display: block; margin: 0 auto var(--space-4); border-radius: var(--radius); }

/* Online payment: the return page (round 10). Calm steel while confirming; no vermilion. */
.payreturn__line { height: 2px; margin: var(--space-4) 0; background: linear-gradient(90deg, var(--steel) 0 30%, var(--mist) 30% 100%); background-size: 200% 100%; animation: payreturn-line 1.6s linear infinite; }
@keyframes payreturn-line { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .payreturn__line { animation: none; } }
.payreturn__waiting { color: var(--steel-ink); }
.payreturn__facts { margin-top: var(--space-4); }
@media (max-width: 599px) { .payreturn__facts { grid-template-columns: 1fr; } } /* the reference never breaks, so it needs the width */
/* A payment or receipt reference (CAA-P-000001) is copied whole: never broken at a hyphen. */
.ref { white-space: nowrap; }
/* Calendar bars: where a multi-day event sits in its week (classes, not style attributes, so the
   Content-Security-Policy can forbid inline styles). Up to 8 bars a week; any more stack below. */
.cal--col-1 { grid-column-start: 1; }
.cal--col-2 { grid-column-start: 2; }
.cal--col-3 { grid-column-start: 3; }
.cal--col-4 { grid-column-start: 4; }
.cal--col-5 { grid-column-start: 5; }
.cal--col-6 { grid-column-start: 6; }
.cal--col-7 { grid-column-start: 7; }
.cal--span-1 { grid-column-end: span 1; }
.cal--span-2 { grid-column-end: span 2; }
.cal--span-3 { grid-column-end: span 3; }
.cal--span-4 { grid-column-end: span 4; }
.cal--span-5 { grid-column-end: span 5; }
.cal--span-6 { grid-column-end: span 6; }
.cal--span-7 { grid-column-end: span 7; }
.cal--row-2 { grid-row: 2; }
.cal--row-3 { grid-row: 3; }
.cal--row-4 { grid-row: 4; }
.cal--row-5 { grid-row: 5; }
.cal--row-6 { grid-row: 6; }
.cal--row-7 { grid-row: 7; }
.cal--row-8 { grid-row: 8; }
.cal--row-9 { grid-row: 9; }
/* Online payments (office): the note and "Check with Paystack" sit under the status chip. */
.online__status { display: block; } /* one block, so a phone's stacked row keeps it together */
.online__note,
.online__check { display: block; margin-top: var(--space-1); }
.online__check .link-button { white-space: nowrap; }
/* Gate code (round 12): the one-time QR and key, the code box and the actions. */
.gate__qr { display: block; width: 270px; max-width: 100%; height: auto; margin: var(--space-3) 0; background: #fff; }
.gate__key { font-size: 1.25rem; letter-spacing: 0.04em; word-break: break-all; }
.gate__steps { padding-left: 1.25rem; }
.gate__code { font-size: 2rem; letter-spacing: 0.2em; max-width: 12ch; }
.gate__actions { display: grid; gap: var(--space-4); }
.gate__actions form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.clock__code-label { display: block; margin-top: var(--space-4); font-weight: 600; }
.clock__code { display: block; width: 100%; max-width: 420px; margin-top: var(--space-2); padding: var(--space-3); font-size: 2.25rem; letter-spacing: 0.3em; text-align: center; border: var(--rule); border-radius: var(--radius); }
/* Clock-in log (round 12) */
.clocklog__badges { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: var(--space-1) var(--space-2); }
.clocklog__look { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.clocklog__reasons { padding-left: 1.25rem; margin: var(--space-2) 0 0; }
.gate__modes { display: flex; max-width: 420px; }
.gate__modes .segments__option { flex: 1 1 0; }
/* Demo gate phone (round 12, DEBUG + DEMO_GATE_PHONE only) */
.gatephone { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--ink); color: #fff; }
.gatephone__screen { text-align: center; padding: var(--space-5); }
.gatephone__banner { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius); background: var(--signal); color: var(--ink); font-weight: 600; }
.gatephone__label { margin-top: var(--space-5); font-size: 1.25rem; }
.gatephone__code { font-size: clamp(3rem, 18vw, 6rem); letter-spacing: 0.08em; margin: var(--space-3) 0; }
.gatephone__left { font-size: 1.25rem; }
/* Settling an overpayment (round 12) */
.settle__forms { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.settle__methods { display: grid; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
/* A grid item and a fieldset keep their content's width by default: let both shrink to a phone. */
.settle__forms > *, .settle__forms fieldset { min-width: 0; min-inline-size: 0; }
.settle__forms input:not([type=radio]) { max-width: 100%; box-sizing: border-box; }
.settle__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.settle__filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0; }
.settle__totals { margin: var(--space-4) 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* Round 13: public pages from text files (the draft privacy notice, the guides) */
.plain {
  max-width: 46rem;
  font-size: 1.125rem;
  line-height: 1.6;
}
.plain h2 {
  margin-top: var(--space-5);
}
.plain ul,
.plain ol {
  padding-left: 1.5rem;
}
.plain li {
  margin: var(--space-2) 0;
}
.plain__draft {
  max-width: 46rem;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Round 13 (accessibility): on phones every tap target is at least 44 x 44 px. Text links and
   link buttons get a larger tap area from padding that an equal negative margin takes back, so
   nothing moves; tabs and fields get a minimum height. Links inside sentences are exempt. */
@media (max-width: 40rem) {
  .link, .link-button, .row-link, .family__name, .assess__tab, .public-header__learn {
    padding: 12px 5px;
    margin: -12px -5px;
  }
  .sort {
    padding: 12px;
    margin: -12px;
  }
  label.checkbox {
    min-height: 44px;
  }
  .page-tabs__tab, .terms__tab, .tabs__tab {
    display: inline-block;
    box-sizing: border-box;
    min-height: 44px;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),
  select, textarea, .input__action {
    min-height: 44px;
  }
}

/* Round 13: the installable website. The hint shows on the sign-in page only, and not once
   Learn is installed; the offline page has nothing about anyone. */
.install-hint {
  max-width: 32rem;
  margin-top: var(--space-5);
  font-size: 1rem;
}
@media (display-mode: standalone) {
  .install-hint {
    display: none;
  }
}
.offline {
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.offline__crest {
  border-radius: var(--radius);
}

/* Round 14: the sections a teacher teaches in, compact in the staff panel */
.staff-detail__sections .checkbox {
  margin-top: var(--space-2);
  min-height: 44px; /* a touch target on a phone (round 14 a11y) */
  display: flex;
  align-items: center;
}
.staff-detail__sections .link-button {
  margin-top: var(--space-3); /* clear of the last checkbox */
  min-height: 32px;
}

/* Round 14: letters. On screen the words keep a readable measure; the PDF is A4 letterhead. */
.letter__body {
  max-width: 68ch;
}
.letter__body p {
  margin: 0 0 var(--space-3);
}
body.letter-pdf {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 11pt;
  line-height: 1.5;
  page: letter;
}
@page letter {
  size: A4;
  margin: 18mm 20mm;
}
.letter-pdf__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--steel);
}
.letter-pdf__crest {
  width: 22mm;
  height: 22mm;
}
.letter-pdf__school {
  margin: 0;
  font-size: 16pt;
  font-weight: 600;
}
.letter-pdf__line,
.letter-pdf__meta {
  margin: 2px 0 0;
  color: var(--steel-ink);
  font-size: 9.5pt;
}
.letter-pdf__meta {
  margin-top: 12px;
}
.letter-pdf__title {
  margin: 14px 0 10px;
  font-size: 14pt;
}
.letter-pdf__sign {
  margin-top: 24px;
}

/* Round 14: the timetable builder's cells and a person's week */
.builder__lesson { display: flex; flex-direction: column; }
.builder__place { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.builder__place select, .builder__place input { max-width: 9rem; font: inherit; font-size: 0.875rem; }
.builder__grid .link-button { font-size: 0.875rem; min-height: 32px; min-width: 44px; }
.timetable-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.timetable-week__name { margin: 0 0 var(--space-2); font-size: 1rem; }
@media (max-width: 899px) {
  .timetable-week { grid-template-columns: 1fr; }
}

/* Round 14: cover for lessons on the Staffing page */
.cover__item { flex-wrap: wrap; gap: var(--space-2); }
.cover__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Round 19: a class's Resources tab, as cards (one column on phones) */
.resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-5);
  padding: 0;
  margin: 0;
  list-style: none;
}
.resource {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule);
}
.resource--hidden {
  opacity: 0.7;
}
.resource__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mist);
}
.resource__thumb img,
.resource__tile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.resource__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--surface);
}
.resource__play svg {
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 50%;
  background: var(--ink);
}
.resource__title {
  margin: 0;
}
.resource__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.resource__actions .link {
  min-width: 44px;
  text-align: center;
}
.resources__filters {
  flex-wrap: wrap;
}
.resources__filters .filters__class select {
  width: 100%;
}

/* Round 38 (Codex's learn-navigation): a phone's "More" menu, in the page's flow above the tab
   bar; hidden on wider screens, where the rail shows every item. */
.tabbar-more { display: none; }
@media (max-width: 899px) {
  .tabbar-more { display: block; margin: 0 var(--space-4) calc(var(--space-6) + 72px); padding: var(--space-3); border: var(--rule); border-radius: var(--radius); background: var(--surface); }
  .tabbar-more summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
  .tabbar-more nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
  .tabbar-more a { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2); color: var(--ink); text-decoration: none; }
  .tabbar-more a[aria-current] { font-weight: 600; border-left: 3px solid var(--navy); }
  .tabbar-more .icon { flex-shrink: 0; }
}
/* Round 51 (review L6): the staff import preview's stored fields at the size of other stacked labels */
.facts--compact dt { margin-top: 4px; font-size: 0.875rem; }
.facts--compact dd { font-size: 1rem; }
.invite-link { overflow-wrap: anywhere; font-weight: 400; }

/* Round 59C: the school set-up pages. */
.setup-progress { margin: var(--space-4) 0; }
.setup-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; border: var(--rule); border-radius: var(--radius); }
.setup-step { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.setup-step + .setup-step { border-top: var(--rule); }
.setup-step__what { display: grid; gap: 2px; min-width: 0; }
.setup-section { margin-top: var(--space-6); }
.setup-section .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); }
.setup-link { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; min-height: 24px; }
.setup-form .field-help { font-size: 0.875rem; }
.setup-form { display: grid; gap: var(--space-3); max-width: 34rem; margin-top: var(--space-4); }
.setup-actions { margin-top: var(--space-3); }
.setup-meter { display: block; width: 100%; max-width: 34rem; height: 0.5rem; margin-top: var(--space-3); }
.setup-copy { display: block; overflow-wrap: anywhere; }
.setup-guide { display: grid; gap: var(--space-3); padding-left: 1.25rem; }
.setup-guide .small { display: block; }
.setup-crest { display: block; border-radius: var(--radius); }

/* Round 66: the printed sheet of parent sign-in codes, one a page */
.codesheet {
  max-width: 44rem;
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.codesheet__school {
  margin: 0;
  font-weight: 600;
}
.codesheet__title {
  margin: var(--space-2) 0;
  font-size: 1.25rem;
}
.codesheet__codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
}
.codesheet__codes li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.codesheet__code {
  font-size: 1.125rem;
  letter-spacing: 0.06em;
}
.codesheet__used {
  color: var(--steel);
}
.codesheet__box {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
  border: 1px solid var(--ink);
}
@media print {
  .codesheet {
    max-width: none;
    margin: 0;
    border: 0;
    break-after: page;
  }
  .codesheet:last-of-type {
    break-after: auto;
  }
}