.account-page {
  --account-ink: #101a37;
  --account-paper: #f7fbff;
  --account-card: #ffffff;
  --account-red: #0866d9;
  --account-gold: #e0a93f;
  --account-mint: #edf5ff;
  position: relative;
  z-index: 2;
  width: min(100%, 1180px);
  flex: 1;
  margin: 0 auto;
  padding: 46px 0 110px;
}

.account-back {
  margin-bottom: 52px;
}

.account-page-hero,
.account-subpage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: end;
  padding-bottom: clamp(54px, 8vw, 92px);
}

.account-page-hero h1,
.account-subpage-hero h1 {
  max-width: none;
  font-size: clamp(78px, 10vw, 148px);
}

.account-page-hero > div:first-child > p:last-child,
.account-subpage-hero > p {
  max-width: 670px;
  margin: 30px 0 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(20px, 2.25vw, 29px);
  font-style: normal;
  line-height: 1.42;
}

.account-subpage-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  border-bottom: 1px solid var(--account-ink);
}

.account-subpage-hero > p {
  margin: 0 0 8px;
}

.account-hero-mark {
  position: relative;
  display: grid;
  width: min(100%, 320px);
  aspect-ratio: 1;
  justify-self: end;
  place-items: center;
  border: 1px solid var(--account-ink);
  border-radius: 50%;
}

.account-hero-mark::before,
.account-hero-mark::after {
  position: absolute;
  border: 1px solid rgba(16, 26, 55, 0.25);
  border-radius: 50%;
  content: "";
}

.account-hero-mark::before {
  inset: 13%;
}

.account-hero-mark::after {
  width: 124%;
  height: 42%;
  transform: rotate(-19deg);
}

.account-hero-mark > span {
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(82px, 10vw, 132px);
  font-style: normal;
  line-height: 1;
}

.account-hero-mark > i {
  position: absolute;
  top: 14%;
  right: 11%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--account-red);
  box-shadow: 0 0 0 9px rgba(8, 102, 217, 0.13);
}

.account-hero-mark > small {
  position: absolute;
  bottom: 17%;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.account-client {
  padding-top: 2px;
}

.account-section-nav {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin: 0 0 34px;
  padding: 5px;
  border: 1px solid rgba(16, 26, 55, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.account-section-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 clamp(13px, 2vw, 18px);
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.account-section-nav a:hover,
.account-section-nav a:focus-visible {
  background: var(--account-ink);
  color: var(--account-paper);
  transform: translateY(-1px);
}

.account-section-nav a[aria-current="page"] {
  border-color: var(--account-ink);
  background: var(--account-ink);
  color: var(--account-paper);
}

.account-section-nav a:focus-visible,
.account-primary-action:focus-visible,
.account-text-button:focus-visible,
.account-auth-tabs button:focus-visible,
.account-form input:focus-visible,
.account-delete-button:focus-visible,
.account-danger-zone summary:focus-visible,
.account-destination:focus-visible,
.progress-section-row:focus-visible,
.progress-next-card > a:focus-visible,
.progress-exam-analysis a:focus-visible,
.progress-topic-card:focus-visible,
.progress-empty a:focus-visible,
.admin-search input:focus-visible,
.admin-search button:focus-visible,
.admin-user-list button:focus-visible,
.admin-detail a:focus-visible {
  outline: 3px solid #ef5c3e;
  outline-offset: 3px;
}

/* The eyebrow above every heading in the account area. It was set solid at
   9px, so a two-word kicker ("Year groups and classes") wrapped into itself. */
.account-kicker {
  margin: 0 0 10px;
  color: var(--account-red);
  font: 700 11px/1.45 "Courier New", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.account-loading {
  display: grid;
  min-height: 340px;
  place-items: center;
  align-content: center;
  gap: 22px;
  border-top: 1px solid var(--account-ink);
  border-bottom: 1px solid var(--account-ink);
}

.account-loading span {
  width: 48px;
  height: 48px;
  border: 1px solid var(--account-ink);
  border-top: 5px solid var(--account-red);
  border-radius: 50%;
  animation: account-spin 850ms linear infinite;
}

.account-loading p {
  margin: 0;
  font: 700 10px/1.4 "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-announcer:empty {
  display: none;
}

.account-success,
.account-error {
  margin: 0 0 22px;
  padding: 13px 16px;
  border-left: 4px solid #102e29;
  background: #cfe1d5;
  font-size: 14px;
  line-height: 1.5;
}

.account-error {
  border-left-color: #ef5c3e;
  background: #f8d8cc;
}

.account-auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
  box-shadow: 16px 18px 0 rgba(16, 26, 55, 0.08);
}

.account-auth-card {
  padding: clamp(30px, 5vw, 64px);
}

.account-auth-tabs {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 46px;
  border: 1px solid var(--account-ink);
  border-radius: 999px;
  overflow: hidden;
}

.account-auth-tabs button {
  min-width: 108px;
  min-height: 39px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--account-ink);
  cursor: pointer;
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-auth-tabs button[aria-selected="true"] {
  background: var(--account-ink);
  color: var(--account-paper);
}

.account-auth-card h2,
.account-auth-note h2,
.account-state-card h2,
.account-signed-out h2,
.progress-overview h2,
.progress-group h2,
.progress-empty h2,
.exam-entry-card h2,
.exam-history h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(37px, 4.2vw, 60px);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.account-form {
  display: grid;
  gap: 25px;
  margin-top: 42px;
}

.account-form label,
.account-danger-zone label {
  display: grid;
  gap: 10px;
  font: 700 10px/1.2 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.account-form input,
.account-danger-zone input {
  width: 100%;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid #102e29;
  border-radius: 0;
  background: rgba(243, 239, 223, 0.68);
  color: #102e29;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  outline: 0;
}

.account-form label > small {
  max-width: 570px;
  color: rgba(16, 26, 55, 0.72);
  font: 400 11px/1.55 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.account-type-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-type-fieldset legend {
  margin: 0 0 12px;
  padding: 0;
  font: 700 10px/1.2 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.account-type-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

.account-type-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.account-form .account-type-option input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

.account-type-option > span {
  display: grid;
  min-height: 118px;
  align-content: start;
  gap: 10px;
  padding: 15px 13px;
  border: 1px solid rgba(16, 26, 55, 0.42);
  background: rgba(247, 251, 255, 0.42);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.account-type-option strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}

.account-type-option small {
  color: rgba(16, 26, 55, 0.72);
  font: 400 11px/1.45 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.account-type-option input:checked + span {
  border-color: var(--account-ink);
  background: var(--account-mint);
  transform: translateY(-2px);
}

.account-type-option input:focus-visible + span {
  outline: 3px solid var(--account-gold);
  outline-offset: 3px;
}

.account-primary-action {
  display: inline-flex;
  min-height: 49px;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  padding: 0 20px;
  border: 1px solid var(--account-ink);
  background: var(--account-ink);
  color: var(--account-paper);
  cursor: pointer;
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.account-primary-action:hover:not(:disabled) {
  border-color: var(--account-red);
  background: var(--account-red);
  transform: translateY(-2px);
}

.account-primary-action:disabled,
.account-delete-button:disabled,
.account-text-button:disabled {
  cursor: wait;
  opacity: 0.56;
}

.account-submit {
  width: 100%;
  margin-top: 4px;
}

.account-auth-note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 64px);
  background:
    radial-gradient(circle at 82% 18%, rgba(45, 154, 239, 0.2), transparent 28%),
    var(--account-ink);
  color: var(--account-paper);
}

.account-note-number {
  color: var(--account-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(92px, 12vw, 156px);
  font-style: italic;
  line-height: 0.75;
}

.account-auth-note > small {
  margin: 12px 0 42px;
  color: var(--account-gold);
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.account-auth-note h2 {
  font-size: clamp(34px, 4vw, 54px);
}

.account-auth-note > p {
  margin: 25px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
}

.account-auth-note ul {
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid rgba(247, 251, 255, 0.24);
  list-style: none;
}

.account-auth-note li {
  padding: 13px 0 13px 22px;
  border-bottom: 1px solid rgba(247, 251, 255, 0.18);
  font-size: 12px;
  line-height: 1.45;
}

.account-auth-note li::before {
  display: inline-block;
  width: 22px;
  margin-left: -22px;
  color: var(--account-gold);
  content: "✓";
}

.account-dashboard {
  display: grid;
  gap: 42px;
}

.account-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  padding: clamp(27px, 4vw, 44px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.account-avatar {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 1px solid var(--account-ink);
  border-radius: 50%;
  background: var(--account-mint);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-style: italic;
}

/* At 68px on `line-height: 1` the descender of a name like "supergio" ran
   into the line below it, which is where the greeting stopped being readable.
   Smaller, with leading of its own, and both following lines set to one size
   so the block reads as a paragraph rather than a collision. */
.account-identity h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(26px, 2.9vw, 38px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

/* Only the lines after the greeting — the kicker above it is a p too, and it
   keeps its own label styling. */
.account-identity h2 ~ p {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.account-text-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--account-ink);
  cursor: pointer;
  font: 700 12px/1.2 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.account-text-button:hover:not(:disabled) {
  color: var(--account-red);
}

.account-destination-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--account-ink);
  border-bottom: 1px solid var(--account-ink);
}

.account-destination {
  display: grid;
  min-height: 260px;
  grid-template-columns: 34px minmax(0, 1fr) 36px;
  gap: 18px;
  align-items: start;
  padding: clamp(28px, 4vw, 48px);
  transition: color 160ms ease, background 160ms ease;
}

.account-destination + .account-destination {
  border-left: 1px solid var(--account-ink);
}

.account-destination:hover,
.account-destination:focus-visible {
  background: var(--account-mint);
  color: var(--account-ink);
}

.account-destination > span,
.account-destination small {
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.account-destination div {
  display: grid;
  gap: 13px;
}

.account-destination strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 5vw, 64px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.account-destination p {
  max-width: 330px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.account-destination > b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 400;
}

.account-security-note,
.account-admin-lock {
  display: grid;
  grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(35px, 7vw, 100px);
  align-items: end;
  padding: 33px 0;
  border-top: 1px solid var(--account-ink);
  border-bottom: 1px solid var(--account-ink);
}

.account-security-note h3,
.account-admin-lock h3,
.account-danger-zone h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 3.2vw, 42px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
}

.account-security-note > p,
.account-admin-lock > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.account-danger-zone {
  border: 1px solid rgba(16, 46, 41, 0.42);
}

.account-danger-zone summary {
  padding: 18px 22px;
  cursor: pointer;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.13em;
  list-style-position: inside;
  text-transform: uppercase;
}

.account-danger-zone[open] summary {
  border-bottom: 1px solid rgba(16, 46, 41, 0.28);
  color: #ef5c3e;
}

.account-danger-zone > div {
  padding: clamp(24px, 4vw, 42px);
}

.account-danger-zone p {
  max-width: 700px;
  margin: 15px 0 30px;
  font-size: 14px;
  line-height: 1.55;
}

.account-delete-controls {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  gap: 14px;
  max-width: 700px;
  margin-top: 11px;
}

.account-delete-button {
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid #ef5c3e;
  background: transparent;
  color: #ef5c3e;
  cursor: pointer;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.account-delete-button:not(:disabled):hover {
  background: #ef5c3e;
  color: white;
}

.account-signed-out,
.account-state-card,
.progress-empty {
  padding: clamp(38px, 7vw, 82px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.account-signed-out > p:not(.account-kicker),
.account-state-card > p:not(.account-kicker),
.progress-empty > p:not(.account-kicker) {
  max-width: 640px;
  margin: 24px 0 30px;
  font-size: 15px;
  line-height: 1.6;
}

.account-signed-out .account-primary-action {
  width: min(100%, 330px);
}

.account-state-card .account-text-button {
  margin-top: 4px;
}

.progress-overview {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: auto minmax(230px, 1fr) minmax(260px, 0.8fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.progress-overview::after {
  position: absolute;
  top: -150px;
  right: -105px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(16, 26, 55, 0.1);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.progress-overview > * {
  position: relative;
  z-index: 1;
}

.progress-orbit-meter {
  display: grid;
  width: 170px;
  height: 170px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--account-red) var(--account-progress),
    rgba(16, 26, 55, 0.12) 0
  );
}

.progress-orbit-meter::before {
  grid-area: 1 / 1;
  width: 136px;
  height: 136px;
  border: 1px solid var(--account-ink);
  border-radius: 50%;
  background: var(--account-card);
  content: "";
}

.progress-orbit-meter span {
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  gap: 5px;
  color: var(--account-ink);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-align: center;
  text-transform: uppercase;
}

.progress-orbit-meter strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.progress-band {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin-top: 18px;
  padding: 0 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.progress-band-ready,
.progress-band-starting {
  color: var(--account-red);
}

.progress-band-building {
  color: #91630b;
}

.progress-band-secure,
.progress-band-mastering {
  color: var(--account-ink);
  background: var(--account-mint);
}

.progress-overview-copy > p:last-child {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.progress-overview-copy .progress-score-formula {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 46, 41, 0.2);
  color: rgba(16, 46, 41, 0.72);
  font-size: 11px;
}

.progress-score-formula strong {
  color: var(--account-ink);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.progress-stats {
  margin: 0;
  border-top: 1px solid var(--account-ink);
}

.progress-stats > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.22);
}

.progress-stats dt {
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.progress-stats dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-style: italic;
}

.progress-stats dd span {
  color: rgba(16, 26, 55, 0.62);
  font-size: 16px;
}

.progress-motivation-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 18px;
  margin-top: 18px;
}

.progress-xp-card,
.progress-league-card {
  min-width: 0;
  padding: clamp(27px, 4vw, 43px);
  border: 1px solid var(--account-ink);
  border-radius: 24px;
}

.progress-xp-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
  color: var(--account-paper);
  background:
    radial-gradient(circle at 14% 8%, rgba(45, 154, 239, 0.24), transparent 30%),
    var(--account-ink);
}

.progress-xp-card .account-kicker {
  color: var(--account-gold);
}

.progress-xp-card h2,
.progress-league-card h2,
.progress-badges h2 {
  margin: 0;
  font-size: clamp(31px, 4vw, 52px);
}

.progress-xp-card > div > p:last-child,
.progress-league-card p {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.progress-xp-card > div > p:last-child {
  color: rgba(247, 251, 255, 0.74);
}

.progress-xp-breakdown {
  margin: 0;
  border-top: 1px solid rgba(247, 251, 255, 0.32);
}

.progress-xp-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(247, 251, 255, 0.22);
}

.progress-xp-breakdown dt,
.progress-xp-breakdown dd {
  margin: 0;
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.progress-xp-breakdown dd {
  color: var(--account-gold);
  font-size: 12px;
}

.progress-league-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 38px);
  align-items: center;
  background:
    radial-gradient(circle at 95% 8%, rgba(45, 154, 239, 0.23), transparent 28%),
    var(--account-mint);
}

.progress-league-orbit {
  display: grid;
  width: clamp(92px, 11vw, 132px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--account-ink);
  border-radius: 50%;
  background: var(--account-gold);
  box-shadow: inset 0 0 0 9px var(--account-mint);
}

.progress-league-orbit span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 62px);
  font-style: italic;
}

.progress-league-meter {
  height: 9px;
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid rgba(16, 26, 55, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.progress-league-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--account-red);
}

.progress-league-card small {
  display: block;
  margin-top: 16px;
  color: rgba(16, 26, 55, 0.68);
  font-size: 10px;
  line-height: 1.5;
}

.progress-badges {
  margin-top: 18px;
  padding: clamp(29px, 5vw, 51px);
  border: 1px solid var(--account-ink);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.68);
}

.progress-badges > header {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
}

.progress-badges > header > p {
  margin: 0 0 6px;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.progress-badge-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
}

.progress-badge-grid li {
  display: grid;
  min-width: 0;
  min-height: 218px;
  grid-template-rows: auto 1fr;
  gap: 20px;
  padding: 19px;
  border: 1px solid rgba(16, 26, 55, 0.36);
  border-radius: 18px;
}

.progress-badge-grid li:nth-child(5) {
  grid-column: auto;
}

.progress-badge-grid li.is-unlocked {
  background: var(--account-gold);
  box-shadow: inset 0 -8px 0 rgba(16, 26, 55, 0.1);
}

.progress-badge-grid li.is-locked {
  background: rgba(16, 26, 55, 0.05);
  color: rgba(16, 26, 55, 0.62);
}

.progress-badge-grid li > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 700 10px/1 "Courier New", monospace;
}

.progress-badge-grid li > div {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 9px;
}

.progress-badge-grid strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
}

.progress-badge-grid p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.progress-badge-grid small {
  font: 700 8px/1.35 "Courier New", monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.progress-activity-notice {
  margin: 18px 0 0;
  padding: 13px 16px;
  border-left: 4px solid var(--account-gold);
  background: rgba(45, 154, 239, 0.15);
  font-size: 11px;
  line-height: 1.5;
}

.progress-next-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
  margin-top: 18px;
  padding: clamp(30px, 5vw, 52px);
  color: var(--account-paper);
  background: var(--account-ink);
}

.progress-next-card .account-kicker {
  color: var(--account-gold);
}

.progress-next-card h2,
.progress-insights h2,
.progress-exam-analysis h2,
.progress-topic-map h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
}

.progress-next-card strong {
  display: block;
  margin-top: 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.5vw, 34px);
  font-style: italic;
  font-weight: 400;
}

.progress-next-card p:last-child {
  max-width: 650px;
  margin: 9px 0 0;
  color: rgba(247, 251, 255, 0.76);
  font-size: 13px;
  line-height: 1.5;
}

.progress-next-card > a {
  display: inline-flex;
  min-height: 48px;
  gap: 18px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid var(--account-gold);
  color: var(--account-ink);
  background: var(--account-gold);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease;
}

.progress-next-card > a:hover,
.progress-next-card > a:focus-visible {
  background: var(--account-paper);
  transform: translateY(-3px);
}

.progress-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
  gap: 18px;
  margin-top: 18px;
}

.progress-insights,
.progress-exam-analysis {
  min-width: 0;
  padding: clamp(28px, 4.5vw, 48px);
  border: 1px solid var(--account-ink);
}

.progress-insights {
  background: var(--account-mint);
}

.progress-exam-analysis {
  background: rgba(45, 154, 239, 0.13);
}

.progress-insight-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.progress-insight-pair article {
  display: grid;
  gap: 9px;
  padding: 20px;
  border: 1px solid rgba(16, 26, 55, 0.34);
  background: rgba(255, 255, 255, 0.46);
}

.progress-insight-pair span,
.progress-profile-row > span,
.progress-exam-summary p,
.progress-topic-card > div:first-child,
.progress-section-status,
.progress-group > header > span {
  font: 700 9px/1.3 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.progress-insight-pair strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

.progress-insight-pair p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.progress-profile-bars {
  display: grid;
  gap: 13px;
  margin-top: 28px;
  padding-top: 23px;
  border-top: 1px solid rgba(16, 26, 55, 0.3);
}

.progress-profile-row {
  display: grid;
  grid-template-columns: 118px minmax(90px, 1fr) 42px;
  gap: 13px;
  align-items: center;
}

.progress-profile-meter,
.progress-topic-meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 26, 55, 0.15);
}

.progress-profile-meter > span,
.progress-topic-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--account-red);
}

.progress-profile-row > b {
  font: 700 10px/1 "Courier New", monospace;
  text-align: right;
}

.progress-exam-analysis > header,
.progress-topic-map > header {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
}

.progress-exam-analysis > header > a {
  flex: 0 0 auto;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.progress-exam-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid rgba(16, 26, 55, 0.3);
  border-bottom: 1px solid rgba(16, 26, 55, 0.3);
}

.progress-exam-summary p {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 15px 10px;
  border-right: 1px solid rgba(16, 26, 55, 0.22);
}

.progress-exam-summary p:first-child {
  padding-left: 0;
}

.progress-exam-summary p:last-child {
  padding-right: 0;
  border-right: 0;
}

.progress-exam-summary strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.progress-exam-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
  margin-top: 27px;
}

.progress-exam-bar {
  display: grid;
  min-width: 0;
  gap: 6px;
  text-align: center;
}

.progress-exam-bar > div {
  display: flex;
  height: clamp(96px, 12vw, 150px);
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--account-ink);
  background: rgba(255, 255, 255, 0.42);
}

.progress-exam-bar > div span {
  width: min(72%, 34px);
  min-height: 5px;
  background: var(--account-red);
}

.progress-exam-bar strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}

.progress-exam-bar small {
  overflow: hidden;
  font: 700 9px/1.3 "Courier New", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-exam-state,
.progress-exam-empty {
  margin-top: 30px;
  padding: 28px;
  border: 1px solid rgba(16, 26, 55, 0.28);
  background: rgba(255, 255, 255, 0.48);
}

.progress-exam-empty strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
}

.progress-exam-empty p,
.progress-exam-state {
  font-size: 12px;
  line-height: 1.5;
}

.progress-exam-empty p {
  margin: 12px 0 20px;
}

.progress-exam-empty a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--account-ink);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.progress-topic-map {
  margin-top: 68px;
}

.progress-topic-map > header {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--account-ink);
}

.progress-topic-map > header > p {
  max-width: 300px;
  margin: 0 0 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  text-align: right;
}

.progress-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.progress-topic-card {
  display: grid;
  min-height: 218px;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 13px;
  padding: 22px;
  border: 1px solid var(--account-ink);
  background: rgba(255, 255, 255, 0.55);
  transition: transform 160ms ease, background 160ms ease;
}

.progress-topic-card.is-started {
  background: var(--account-mint);
}

.progress-topic-card:hover,
.progress-topic-card:focus-visible {
  background: var(--account-gold);
  transform: translateY(-4px);
}

.progress-topic-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.progress-topic-card em {
  font-style: normal;
}

.progress-topic-card > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
}

.progress-topic-card > small {
  font-size: 11px;
  line-height: 1.4;
}

.progress-topic-card > b {
  font: 700 10px/1 "Courier New", monospace;
  text-align: right;
}

.progress-groups {
  display: grid;
  gap: 58px;
  margin-top: 62px;
}

.progress-group > header {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 18px;
}

.progress-group > header > span {
  padding-bottom: 6px;
}

.progress-group h2,
.exam-history h2 {
  font-size: clamp(34px, 4vw, 52px);
}

.progress-section-list {
  border-top: 1px solid var(--account-ink);
}

.progress-section-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(130px, 0.65fr) 52px;
  gap: 28px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid rgba(16, 26, 55, 0.22);
  transition: color 160ms ease, padding 160ms ease;
}

.progress-section-row:hover,
.progress-section-row:focus-visible {
  padding-left: 12px;
  color: var(--account-red);
}

.progress-section-row > div:first-child {
  display: grid;
  gap: 6px;
}

.progress-section-row strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-style: italic;
}

.progress-section-row small {
  color: var(--account-ink);
  font-size: 11px;
}

.progress-section-status {
  width: max-content;
  margin-top: 3px;
  padding: 5px 7px;
  border: 1px solid rgba(16, 26, 55, 0.35);
  border-radius: 999px;
}

.progress-inline-meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 26, 55, 0.13);
}

.progress-inline-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--account-red);
}

.progress-section-row > b {
  font: 700 11px/1 "Courier New", monospace;
  text-align: right;
}

.progress-empty {
  margin-top: 58px;
}

.progress-empty > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.progress-empty-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.progress-empty-steps li {
  display: grid;
  gap: 8px;
  padding: 19px;
  border: 1px solid rgba(16, 26, 55, 0.28);
}

.progress-empty-steps span {
  color: var(--account-red);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.1em;
}

.progress-empty-steps strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
}

.progress-empty-steps small {
  font-size: 11px;
  line-height: 1.45;
}

.progress-empty a {
  display: inline-flex;
  min-height: 43px;
  gap: 16px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--account-ink);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.progress-empty a:hover,
.progress-empty a:focus-visible {
  background: var(--account-ink);
  color: var(--account-paper);
}

.exams-layout {
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(38px, 7vw, 92px);
  align-items: start;
}

.exam-entry-card {
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.exam-entry-card > p:not(.account-kicker) {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.exam-form {
  margin-top: 34px;
}

.exam-score-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.exam-score-fields > span {
  padding-bottom: 17px;
  color: var(--account-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
}

.exam-score-help {
  margin: -4px 0 0;
  color: var(--account-muted);
  font-size: 12px;
  line-height: 1.55;
}

.exam-history > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--account-ink);
}

.exam-history > header > strong {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--account-ink);
  border-radius: 50%;
  font: 700 11px/1 "Courier New", monospace;
}

.exam-attempt-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exam-attempt-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 25px 4px;
  border-bottom: 1px solid rgba(16, 26, 55, 0.23);
}

.exam-attempt-list li > div:first-child {
  display: grid;
  gap: 7px;
}

.exam-attempt-list time,
.exam-attempt-list small {
  font: 700 9px/1.25 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.exam-attempt-list time {
  color: var(--account-red);
}

.exam-attempt-list li > div:first-child > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2.5vw, 30px);
  font-style: italic;
  font-weight: 400;
}

.exam-attempt-score {
  display: grid;
  min-width: 100px;
  gap: 7px;
  text-align: right;
}

.exam-attempt-score strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-style: italic;
  font-weight: 400;
}

.exam-attempt-score span {
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
}

.exam-empty {
  display: grid;
  min-height: 320px;
  place-items: center;
  align-content: center;
  gap: 13px;
  border-bottom: 1px solid var(--account-ink);
  text-align: center;
}

.exam-empty > span {
  color: rgba(16, 26, 55, 0.18);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 82px;
  font-style: italic;
  line-height: 1;
}

.exam-empty h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
}

.exam-empty p {
  max-width: 320px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* This page is a working console, not a landing page — the record you came to
   read should be on screen without scrolling past the title, so the whole
   masthead runs at roughly half the size the public account pages use. */
.admin-page .account-subpage-hero {
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 40px);
}

.admin-page .account-subpage-hero .eyebrow {
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
}

.admin-page .account-subpage-hero h1 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.admin-page .account-subpage-hero > p {
  max-width: 56ch;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
}

.admin-privacy-note {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: baseline;
  margin-bottom: 40px;
  padding: 20px 0;
  border-top: 1px solid var(--account-ink);
  border-bottom: 1px solid var(--account-ink);
}

/* One size for every section heading on this console, so the privacy note,
   the directory, the create card and the record panel read as one rank. */
.admin-privacy-note h2,
.admin-directory h2,
.admin-create-card h2,
.admin-detail h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.admin-privacy-note > p {
  max-width: 62ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.admin-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: start;
}

.admin-directory > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--account-ink);
}

.admin-directory > header > strong {
  display: grid;
  min-width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--account-ink);
  border-radius: 50%;
  font: 700 10px/1 "Courier New", monospace;
}

.admin-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 22px 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.25);
}

.admin-search label {
  display: grid;
  gap: 8px;
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-search input {
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--account-ink);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.78);
  color: var(--account-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}

.admin-search button {
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid var(--account-ink);
  background: var(--account-ink);
  color: var(--account-paper);
  cursor: pointer;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-search button:disabled {
  cursor: wait;
  opacity: 0.56;
}

.admin-user-list {
  border-bottom: 1px solid var(--account-ink);
}

.admin-user-list > button {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
  padding: 17px 4px;
  border: 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.2);
  background: transparent;
  color: var(--account-ink);
  cursor: pointer;
  text-align: left;
}

.admin-user-list > button:last-child {
  border-bottom: 0;
}

.admin-user-list > button:hover,
.admin-user-list > button[aria-pressed="true"] {
  background: var(--account-mint);
}

.admin-user-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--account-ink);
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-style: italic;
}

.admin-user-list > button > span:nth-child(2) {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-user-list > button > span:nth-child(2) > strong {
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-list small,
.admin-user-counts,
.admin-user-list b {
  font: 700 9px/1.4 "Courier New", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-user-counts {
  text-align: right;
}

.admin-user-list b {
  grid-column: 2;
  width: max-content;
  padding: 4px 7px;
  background: var(--account-gold);
}

.admin-empty-list {
  margin: 0;
  padding: 36px 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
}

.admin-load-more {
  margin-top: 20px;
}

.admin-create-card {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.admin-create-card > p:not(.account-kicker) {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.56;
}

.admin-create-card .account-form {
  margin-top: 32px;
}

.admin-detail {
  margin-top: 68px;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

/* An empty-state instruction, not a headline — it should not outshout the
   record it is waiting for you to pick. */
.admin-detail-placeholder {
  max-width: 46ch;
  margin: 0 auto;
  padding: 30px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.2vw, 16px);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.admin-detail > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--account-ink);
}

.admin-detail > header > div > p:last-child {
  margin: 13px 0 0;
  font-size: 12px;
}

.admin-detail dl {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 22px;
  margin: 0;
}

.admin-detail dl > div {
  display: grid;
  gap: 5px;
  text-align: right;
}

.admin-detail dt {
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-detail dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-style: italic;
}

.admin-detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 6vw, 76px);
  padding-top: 38px;
}

.admin-detail-columns h3 {
  margin: 0 0 18px;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: 27px;
  font-style: normal;
  font-weight: 400;
}

.admin-detail-columns ul,
.admin-detail-columns ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--account-ink);
  list-style: none;
}

.admin-detail-columns li {
  display: grid;
  gap: 6px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.2);
}

.admin-detail-columns a,
.admin-detail-columns li strong {
  width: max-content;
  max-width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
}

.admin-detail-columns li span,
.admin-detail-columns li small,
.admin-detail-columns li b {
  font: 700 9px/1.4 "Courier New", monospace;
}

.admin-detail-columns ol li {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-detail-columns ol li > span {
  display: grid;
  gap: 5px;
}

.admin-detail-columns li b {
  text-align: right;
}

/* Last block on the page: requests are read once and acted on, where the
   account directory above is what this console is opened for day to day. */
.admin-tutor-requests {
  margin: 48px 0 0;
  padding: clamp(22px, 3.5vw, 40px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.admin-tutor-requests > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.34fr);
  gap: 28px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--account-ink);
}

.admin-tutor-requests h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.admin-tutor-requests > header p:last-child {
  max-width: 62ch;
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.58;
}

.admin-tutor-requests label {
  display: grid;
  gap: 9px;
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-tutor-requests select {
  width: 100%;
  min-height: 43px;
  padding: 7px 11px;
  border: 1px solid var(--account-ink);
  border-radius: 0;
  background: var(--account-paper);
  color: var(--account-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.admin-tutor-requests select:focus-visible,
.admin-tutor-details a:focus-visible {
  outline: 3px solid var(--account-red);
  outline-offset: 3px;
}

.admin-tutor-requests .account-announcer {
  margin-top: 22px;
}

.admin-tutor-list {
  display: grid;
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.admin-tutor-list > li {
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid rgba(16, 26, 55, 0.34);
  background: var(--account-paper);
}

.admin-tutor-list > li > header {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: start;
}

/* A learner's name is a card title under "Appointment requests", so it has to
   stay below that heading — at the old 42px it outranked the section it sits
   in. */
.admin-tutor-list h3 {
  margin: 9px 0 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(19px, 1.9vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
}

.admin-tutor-list header p {
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.admin-tutor-list time {
  font: 700 9px/1.35 "Courier New", monospace;
  letter-spacing: 0.07em;
  text-align: right;
  text-transform: uppercase;
}

.admin-tutor-status {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--account-ink);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-tutor-status.is-pending {
  border-color: var(--account-red);
  background: #d6ebff;
  color: #7d2517;
}

.admin-tutor-status.is-confirmed {
  border-color: #47715f;
  background: var(--account-mint);
}

.admin-tutor-status.is-declined,
.admin-tutor-status.is-closed {
  opacity: 0.65;
}

.admin-tutor-schedule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 0;
  border-top: 1px solid rgba(16, 26, 55, 0.23);
  border-bottom: 1px solid rgba(16, 26, 55, 0.23);
}

.admin-tutor-schedule > div {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
}

.admin-tutor-schedule > div + div {
  border-left: 1px solid rgba(16, 26, 55, 0.23);
}

.admin-tutor-schedule dt,
.admin-tutor-details span {
  font: 700 9px/1.25 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-tutor-schedule dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-style: italic;
}

.admin-tutor-details {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr);
  gap: 30px;
  padding: 20px 0;
}

.admin-tutor-details > div,
.admin-tutor-details address {
  display: grid;
  align-content: start;
  gap: 8px;
}

.admin-tutor-details strong,
.admin-tutor-details a {
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
}

.admin-tutor-details a {
  color: var(--account-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-tutor-details p {
  margin: 7px 0 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
}

.admin-tutor-details address {
  font-style: normal;
}

.admin-tutor-status-control {
  width: min(100%, 250px);
}

.admin-tutor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  align-items: end;
}

.admin-tutor-delete {
  min-height: 43px;
  padding: 0 15px;
  border: 1px solid #ef5c3e;
  background: transparent;
  color: #ef5c3e;
  cursor: pointer;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-tutor-delete:hover:not(:disabled),
.admin-tutor-delete:focus-visible {
  background: #ef5c3e;
  color: var(--account-paper);
}

.admin-tutor-delete:focus-visible {
  outline: 3px solid #ef5c3e;
  outline-offset: 3px;
}

.admin-tutor-delete:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-tutor-empty {
  margin: 0;
  padding: 44px 4px 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-style: italic;
  text-align: center;
}

@media (max-width: 960px) {
  .account-auth-layout,
  .exams-layout {
    grid-template-columns: 1fr;
  }

  .account-auth-note {
    min-height: 460px;
  }

  .progress-overview {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .progress-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .progress-stats > div {
    display: grid;
    gap: 9px;
    border-right: 1px solid rgba(16, 26, 55, 0.22);
    text-align: center;
  }

  .progress-stats > div:last-child {
    border-right: 0;
  }

  .progress-badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .progress-badge-grid li:nth-child(5) {
    grid-column: span 2;
  }

  .admin-workspace,
  .admin-detail-columns,
  .admin-tutor-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .account-page {
    padding-top: 38px;
    padding-bottom: 78px;
  }

  .account-back {
    margin-bottom: 38px;
  }

  .account-page-hero,
  .account-subpage-hero {
    grid-template-columns: 1fr;
    gap: 42px;
    align-items: start;
  }

  .account-page-hero h1,
  .account-subpage-hero h1 {
    font-size: clamp(70px, 20vw, 112px);
  }

  .account-hero-mark {
    width: min(78vw, 310px);
    justify-self: start;
  }

  .account-subpage-hero > p {
    margin: 0;
  }

  .account-identity {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-identity > .account-text-button {
    grid-column: 2;
    justify-self: start;
  }

  .account-destination-grid,
  .account-security-note,
  .account-admin-lock {
    grid-template-columns: 1fr;
  }

  .account-destination + .account-destination {
    border-top: 1px solid var(--account-ink);
    border-left: 0;
  }

  .account-destination {
    min-height: 220px;
  }

  .account-security-note,
  .account-admin-lock {
    gap: 24px;
  }

  .admin-privacy-note,
  .admin-detail > header,
  .admin-tutor-requests > header {
    grid-template-columns: 1fr;
  }

  .admin-detail dl {
    justify-content: start;
  }

  .admin-detail dl > div {
    text-align: left;
  }

  .progress-overview {
    grid-template-columns: 1fr;
  }

  .progress-motivation-grid,
  .progress-xp-card {
    grid-template-columns: 1fr;
  }

  .progress-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-badge-grid li:nth-child(5) {
    grid-column: auto;
  }

  .progress-orbit-meter {
    width: 148px;
    height: 148px;
  }

  .progress-orbit-meter::before {
    width: 118px;
    height: 118px;
  }

  .progress-section-row {
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 13px 20px;
  }

  .progress-inline-meter {
    grid-column: 1;
  }

  .progress-section-row > b {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (max-width: 540px) {
  .account-section-nav {
    width: 100%;
    flex-wrap: nowrap;
    border-radius: 18px;
  }

  .account-section-nav a {
    min-width: 0;
    flex: 1 1 0;
    justify-content: center;
    padding: 0 7px;
    letter-spacing: 0.08em;
  }

  .account-auth-card,
  .account-auth-note,
  .exam-entry-card {
    padding: 28px 22px;
  }

  .account-auth-tabs {
    display: grid;
    width: 100%;
  }

  .account-auth-tabs button {
    min-width: 0;
  }

  .account-type-options {
    grid-template-columns: 1fr;
  }

  .account-type-option > span {
    min-height: 0;
  }

  .account-auth-note {
    min-height: 420px;
  }

  .account-identity {
    grid-template-columns: 1fr;
  }

  .account-avatar {
    width: 74px;
    height: 74px;
    font-size: 40px;
  }

  .account-identity > .account-text-button {
    grid-column: 1;
  }

  .account-destination {
    grid-template-columns: 27px minmax(0, 1fr) 32px;
    gap: 12px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .account-delete-controls,
  .progress-stats {
    grid-template-columns: 1fr;
  }

  .progress-stats > div {
    display: flex;
    border-right: 0;
  }

  .progress-league-card {
    grid-template-columns: 1fr;
  }

  .progress-league-orbit {
    width: 92px;
  }

  .progress-badges > header {
    display: grid;
    align-items: start;
  }

  .progress-badge-grid {
    grid-template-columns: 1fr;
  }

  .progress-badge-grid li {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: none;
  }

  .exam-score-fields {
    grid-template-columns: 1fr;
  }

  .exam-score-fields > span {
    display: none;
  }

  .exam-attempt-list li {
    align-items: end;
  }

  .exam-attempt-score {
    min-width: 74px;
  }

  .admin-search,
  .admin-user-list > button {
    grid-template-columns: 1fr;
  }

  .admin-search button {
    width: 100%;
  }

  .admin-user-avatar {
    display: none;
  }

  .admin-user-counts {
    text-align: left;
  }

  .admin-user-list b {
    grid-column: 1;
  }

  .admin-detail dl {
    grid-template-columns: 1fr;
  }

  .admin-detail-columns ol li {
    grid-template-columns: 1fr;
  }

  .admin-detail-columns li b {
    text-align: left;
  }

  .admin-tutor-list > li > header {
    display: grid;
  }

  .admin-tutor-list time {
    text-align: left;
  }

  .admin-tutor-schedule {
    grid-template-columns: 1fr;
  }

  .admin-tutor-schedule > div + div {
    border-top: 1px solid rgba(16, 26, 55, 0.23);
    border-left: 0;
  }

  .admin-tutor-actions {
    display: grid;
    justify-content: stretch;
  }

  .admin-tutor-status-control {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-section-nav a {
    transition: none;
  }

  .account-section-nav a:hover,
  .account-section-nav a:focus-visible {
    transform: none;
  }

  .account-loading span {
    animation: none;
  }
}

@keyframes account-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Membership admin controls */
.admin-user-list b.admin-member-flag {
  background: transparent;
  border: 1px solid var(--line);
}

.admin-membership {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.admin-membership h3 {
  margin: 0;
  font-size: 15px;
}

.admin-membership p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}

.admin-membership-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.admin-membership-remove {
  color: var(--red);
}

/* Username, account-type, password, and deletion controls on the selected
   account */
.admin-account-lock,
.admin-account-username,
.admin-account-type,
.admin-account-password {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.admin-account-lock h3,
.admin-account-username h3,
.admin-account-type h3,
.admin-account-password h3 {
  margin: 0;
  font-size: 15px;
}

.admin-account-lock p,
.admin-account-username p,
.admin-account-type p,
.admin-account-password p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}

/* The shared form spacing is built for a full page; inside this panel the
   fields sit directly under their heading. */
.admin-account-form {
  max-width: 460px;
  margin-top: 6px;
  gap: 18px;
}

.admin-account-form button {
  justify-self: start;
}

.admin-danger-zone {
  margin-top: 22px;
}

/* School area: grades, teaching staff, students, and recorded marks */
.school-grades,
.school-teachers,
.school-students,
.school-marks {
  margin: 18px 0;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.school-role-note {
  display: grid;
  min-width: 0;
  gap: 14px;
  margin: 0;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(16, 26, 55, 0.28);
  border-radius: 20px 6px 20px 20px;
  background:
    radial-gradient(circle at 94% 8%, rgba(8, 102, 217, 0.16), transparent 27%),
    var(--account-card);
}

.school-role-note > header {
  display: flex;
  gap: 13px;
  align-items: center;
}

.school-role-monogram {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--account-ink);
  color: var(--account-paper);
  font: 700 18px/1 Georgia, "Times New Roman", serif;
}

.school-role-note h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(20px, 2vw, 27px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
}

.school-role-note p:last-child {
  margin: 0;
}

.school-role-note > p {
  max-width: 610px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.school-role-capabilities,
.school-plan-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-role-capabilities li,
.school-plan-features li,
.school-summary-badge,
.school-seat-unlimited {
  padding: 6px 9px;
  border: 1px solid rgba(16, 26, 55, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  font: 700 8px/1.25 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.school-grades > header,
.school-teachers > header,
.school-students > header,
.school-marks > header {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--account-ink);
}

.school-grades h2,
.school-teachers h2,
.school-students h2,
.school-marks h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(19px, 2vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.school-grades > header strong,
.school-teachers > header strong,
.school-students > header strong {
  font: 700 15px/1 "Courier New", monospace;
}

.school-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}

.school-inline-form label,
.school-member-form label,
.school-mark-form label {
  display: grid;
  gap: 8px;
  font: 700 12px/1.2 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.school-inline-form input,
.school-member-form input,
.school-member-form select,
.school-mark-form input,
.school-grade-picker select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--account-ink);
  border-radius: 0;
  background: rgba(247, 251, 255, 0.68);
  color: var(--account-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  outline: 0;
}

/* The shared account form is spaced for a full page; these sit inside cards. */
.school-member-form,
.school-mark-form {
  gap: 12px;
  max-width: 560px;
  margin: 12px 0;
}

.school-mode-fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.school-mode-fieldset legend {
  padding: 0 0 8px;
  font: 700 12px/1.2 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.school-mode-fieldset label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(16, 26, 55, 0.28);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.school-mode-fieldset label span {
  display: grid;
  gap: 4px;
}

.school-mode-fieldset strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

.school-mode-fieldset small {
  font: 400 12px/1.5 system-ui, sans-serif;
  opacity: 0.75;
}

.school-mark-scores {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.school-grade-list,
.school-member-list,
.school-mark-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-grade-list li,
.school-member-list li,
.school-mark-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.2);
}

.school-grade-list li > span,
.school-member-list li > span,
.school-mark-list li > span {
  display: grid;
  gap: 5px;
  flex: 1 1 200px;
}

.school-grade-list strong,
.school-member-list strong,
.school-mark-list strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  overflow-wrap: anywhere;
  font-style: italic;
  font-weight: 400;
}

.school-grade-list small,
.school-member-list small,
.school-mark-list small,
.school-mark-list b {
  font: 700 11px/1.45 "Courier New", monospace;
  letter-spacing: 0.08em;
}

.school-grade-picker {
  flex: 0 1 200px;
}

.school-grade-picker select {
  min-height: 44px;
  font-size: 17px;
}

.school-remove {
  color: var(--account-red);
}

.school-empty {
  max-width: 62ch;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

.school-member-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--account-ink);
  border-radius: 0;
  background: rgba(247, 251, 255, 0.68);
  color: var(--account-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  outline: 0;
  resize: vertical;
}

.school-record-progress,
.school-record-assignments {
  padding: 12px 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.2);
}

.school-marks h3 {
  margin: 14px 0 8px;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
}

.school-record-progress h3,
.school-record-assignments h3 {
  margin: 0 0 14px;
}

.school-progress-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin: 0 0 18px;
}

.school-progress-stats > div {
  display: grid;
  gap: 5px;
}

.school-progress-stats dt {
  font: 700 11px/1.45 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.school-progress-stats dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-style: italic;
}

.school-progress-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-progress-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.14);
}

.school-progress-list li > span {
  display: grid;
  gap: 4px;
  flex: 1 1 200px;
}

.school-progress-list strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  overflow-wrap: anywhere;
  font-style: italic;
  font-weight: 400;
}

.school-progress-list small,
.school-progress-list b {
  font: 700 11px/1.45 "Courier New", monospace;
  letter-spacing: 0.08em;
}

/* A student's own view of the work their school has set */
.account-assignments {
  display: grid;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: rgba(247, 251, 255, 0.76);
}

.account-assignments h3 {
  margin: 6px 0 8px;
  font-size: 19px;
}

.account-assignment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.account-assignment-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(16, 26, 55, 0.18);
}

.account-assignment-list li > div {
  display: grid;
  gap: 5px;
}

.account-assignment-list strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}

.account-assignment-list p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.account-assignment-list small {
  font: 700 9px/1.4 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-assignment-list li.is-done strong {
  opacity: 0.62;
}

.account-assignment-due-soon {
  color: var(--account-red);
}

/* Confirmations used to paint several screens above the action that caused
   them, so they were never seen. */
.school-client .account-announcer {
  position: static;
  background: var(--account-paper, #f7fbff);
}

.school-client .account-announcer:not(:empty) {
  padding: 10px 0;
}

/* A teacher's classes, students and progress, opened in place */
.school-staff-list li {
  align-items: flex-start;
}

.school-staff-detail {
  flex: 1 0 100%;
  display: grid;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(16, 26, 55, 0.24);
  background: rgba(16, 26, 55, 0.04);
}

.school-staff-detail fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.school-staff-detail legend {
  padding: 0 0 6px;
  font: 700 12px/1.2 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.school-class-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.school-class-picker label {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(16, 26, 55, 0.28);
  background: rgba(247, 251, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
}

.school-staff-detail .school-progress-list li {
  padding: 6px 0;
}

/* Inline student records deliberately have no fixed height or internal
   scroller. The document remains the one vertical scrolling surface, so an
   expanded teacher or learner can never trap wheel, touch, or keyboard input. */
.school-student-inline-record {
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.school-student-record-card {
  display: grid;
  min-width: 0;
  gap: 18px;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--account-ink);
  border-radius: 18px 18px 6px 18px;
  background:
    radial-gradient(circle at 96% 4%, rgba(45, 154, 239, 0.16), transparent 24%),
    rgba(255, 255, 255, 0.92);
}

.school-student-record-header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(16, 26, 55, 0.28);
}

.school-student-record-header h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(22px, 2.5vw, 30px);
  font-style: normal;
  font-weight: 400;
}

.school-assessment-form.school-mark-form {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(220px, 1.35fr) minmax(180px, 1fr);
  gap: 14px 18px;
  margin: 0;
  padding: 18px;
  border-left: 5px solid var(--account-red);
  background: rgba(219, 237, 255, 0.34);
}

.school-assessment-form > label:first-child,
.school-assessment-form .school-mark-scores,
.school-assessment-form > button {
  grid-column: 1 / -1;
}

.school-assessment-form select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--account-ink);
  border-radius: 0;
  background: rgba(247, 251, 255, 0.78);
  color: var(--account-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.school-assessment-form label > small {
  font: 400 11px/1.5 system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.72;
}

.school-assessment-form > button {
  justify-self: start;
}

.school-student-record-card h4 {
  margin: 0 0 12px;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
}

.school-student-work-list b,
.school-assignment-status {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(16, 26, 55, 0.24);
  border-radius: 999px;
  background: rgba(219, 237, 255, 0.42);
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.school-assess-assignment {
  flex: 0 0 auto;
  min-height: 40px;
  font-size: 9px;
}

.school-record-marks {
  min-width: 0;
}

.school-record-marks .school-mark-list {
  border-top: 1px solid rgba(16, 26, 55, 0.18);
}

/* A password shown once. Stays until it is deliberately dismissed. */
.school-secret-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 22px;
  padding: 14px clamp(16px, 3vw, 26px);
  border: 2px solid var(--account-ink);
  background: rgba(247, 251, 255, 0.9);
}

.school-secret-notice p {
  margin: 0;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.55;
}

/* Searching, narrowing and ordering the roster */
.school-roster-tools {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 12px 0 4px;
}

.school-roster-tools input,
.school-roster-tools select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--account-ink);
  border-radius: 0;
  background: rgba(247, 251, 255, 0.68);
  color: var(--account-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  outline: 0;
}

.school-roster li {
  transition: background 120ms ease;
}

.school-roster li.is-open {
  background: rgba(16, 26, 55, 0.05);
}

.school-roster li[aria-busy="true"] {
  opacity: 0.6;
}

/* The latest mark, sitting in the row so the list itself says who needs
   looking at. */
.school-roster-mark {
  display: flex !important;
  flex: 0 1 190px;
  gap: 10px;
  align-items: center;
}

.school-roster-mark .progress-inline-meter {
  flex: 1 1 auto;
}

.school-roster-mark b {
  font: 700 10px/1 "Courier New", monospace;
}

.school-roster-mark small {
  font: 700 11px/1.45 "Courier New", monospace;
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .school-roster-tools {
    grid-template-columns: minmax(0, 1fr);
  }
}

.school-account-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  margin: 28px 0 8px;
}

.school-plan {
  display: grid;
  min-width: 0;
  gap: 17px;
  margin: 0;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(16, 26, 55, 0.28);
  border-radius: 6px 20px 20px 20px;
  background:
    linear-gradient(145deg, rgba(219, 237, 255, 0.72), rgba(255, 255, 255, 0.84)),
    var(--account-card);
}

.school-plan > header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.school-plan h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(22px, 2.2vw, 29px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
}

.school-seat-counts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.school-seat-counts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 0.9fr);
  gap: 13px;
  align-items: center;
  padding-top: 11px;
  border-top: 1px solid rgba(16, 26, 55, 0.18);
}

.school-seat-counts > div > div {
  display: grid;
  gap: 5px;
}

.school-seat-counts dt {
  font: 700 10px/1.45 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.72;
}

.school-seat-counts dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-style: italic;
  line-height: 1;
}

.school-seat-counts dd span {
  font-size: 13px;
  opacity: 0.65;
}

.school-seat-counts progress {
  width: 100%;
  height: 8px;
}

.school-seat-unlimited {
  justify-self: end;
  background: var(--account-ink);
  color: var(--account-paper);
}

.school-plan-features li {
  background: rgba(255, 255, 255, 0.78);
}

.admin-school-plan {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.admin-school-plan h3 {
  margin: 0;
  font-size: 15px;
}

.admin-school-plan p {
  margin: 0;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}

.admin-school-plan small {
  opacity: 0.7;
}

/* Looking at the site through another account's eyes */
.account-viewing-as {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 26px;
  padding: 14px clamp(16px, 3vw, 26px);
  border: 2px solid var(--account-red);
  background: rgba(190, 60, 45, 0.08);
}

.account-viewing-as p {
  margin: 0;
  max-width: 780px;
  font-size: 13px;
  line-height: 1.55;
}

.account-viewing-as strong {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}

.admin-view-as {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.admin-view-as h3 {
  margin: 0;
  font-size: 15px;
}

.admin-view-as p {
  margin: 0;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}

.admin-view-as button {
  justify-self: start;
}

/* Narrowing the account directory to one kind of account */
.admin-type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(16, 26, 55, 0.2);
}

.admin-type-filter button[aria-pressed="true"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* An administrator choosing which school to manage */
.school-chooser,
.school-managing-note {
  margin: 18px 0;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.school-chooser {
  display: grid;
  gap: 18px;
}

.school-chooser h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(19px, 2vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
}

.school-chooser > div > p:last-child {
  max-width: 640px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.school-managing-note {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(18px, 3vw, 28px);
}

.school-managing-note p {
  max-width: 62ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .school-inline-form,
  .school-mark-scores {
    grid-template-columns: minmax(0, 1fr);
  }

  .school-mark-scores > span[aria-hidden] {
    display: none;
  }
}

/* Membership card on the account dashboard */
.account-membership-card {
  display: grid;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: rgba(247, 251, 255, 0.76);
}

.account-membership-card.is-trial-active {
  border-left: 7px solid var(--account-red);
  background:
    radial-gradient(circle at 90% 10%, rgba(45, 154, 239, 0.16), transparent 30%),
    var(--account-mint);
}

.account-trial-upgrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--account-ink);
  border-left: 7px solid var(--account-gold);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 8%, rgba(45, 154, 239, 0.23), transparent 34%),
    var(--account-ink);
  color: var(--account-paper);
  box-shadow: rgba(16, 26, 55, 0.13) 0 16px 40px;
}

.account-trial-upgrade-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.account-trial-upgrade .account-kicker {
  color: var(--account-gold);
}

.account-trial-upgrade h2 {
  max-width: 22ch;
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(24px, 3vw, 38px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}

.account-trial-upgrade-copy > p:not(.account-kicker) {
  max-width: 66ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.82;
}

.account-trial-meter {
  display: grid;
  grid-template-columns: minmax(130px, 280px) auto;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.account-trial-meter progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 251, 255, 0.2);
  accent-color: var(--account-gold);
}

.account-trial-meter progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(247, 251, 255, 0.2);
}

.account-trial-meter progress::-webkit-progress-value,
.account-trial-meter progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--account-gold);
}

.account-trial-meter span {
  font: 700 9px/1.35 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.76;
}

.account-trial-upgrade-actions {
  display: grid;
  justify-items: stretch;
}

.account-trial-upgrade .account-primary-action {
  border-color: var(--account-paper);
  background: var(--account-paper);
  color: var(--account-ink);
  text-align: center;
}

.account-trial-upgrade .account-text-button {
  justify-self: center;
  color: var(--account-paper);
}

.account-trial-upgrade > .account-checkout-pending,
.account-trial-upgrade > .account-membership-notice {
  grid-column: 1 / -1;
}

.account-trial-upgrade > .account-membership-notice {
  color: var(--account-paper);
}

@media (max-width: 720px) {
  .account-trial-upgrade {
    grid-template-columns: 1fr;
  }

  .account-trial-upgrade-actions {
    justify-items: stretch;
  }
}

@media (max-width: 480px) {
  .account-trial-meter {
    grid-template-columns: 1fr;
  }

  .account-trial-upgrade .account-primary-action {
    width: 100%;
  }
}

.account-access-shortcut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--account-ink);
  border-left: 7px solid var(--account-red);
  background:
    radial-gradient(circle at 92% 10%, rgba(45, 154, 239, 0.18), transparent 30%),
    var(--account-mint);
}

.account-access-shortcut > div:first-child {
  display: grid;
  gap: 10px;
}

.account-access-shortcut h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(27px, 3vw, 40px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.06;
}

.account-access-shortcut p:last-child {
  max-width: 64ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .account-access-shortcut {
    grid-template-columns: 1fr;
  }
}

.account-membership-card h3 {
  margin: 6px 0 8px;
  font-size: 19px;
}

.account-membership-card > div > p:last-child {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}

.account-membership-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}

.account-membership-notice {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--red);
}

.account-trial-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  padding: 14px 16px;
  border: 1px solid rgba(16, 26, 55, 0.3);
  background: rgba(247, 251, 255, 0.54);
}

.account-trial-status strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
}

.account-trial-status span,
.account-trial-fine-print {
  font: 700 9px/1.5 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.account-checkout-pending {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border-left: 4px solid var(--account-gold);
  background: rgba(45, 154, 239, 0.1);
}

.account-checkout-pending strong {
  font: 700 10px/1.4 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-checkout-pending span {
  max-width: 72ch;
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.78;
}

.account-trial-fine-print {
  margin: 0;
  opacity: 0.68;
}

.account-parent-access-note {
  margin: 0;
  padding: 12px 15px;
  border-left: 4px solid var(--account-gold);
  background: rgba(45, 154, 239, 0.1);
  font-size: 12px;
  line-height: 1.55;
}

/* Email and password cards on the account dashboard */
.account-email-card,
.account-password-card {
  display: grid;
  gap: 22px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.account-email-card h3,
.account-password-card h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(27px, 3.2vw, 42px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
}

.account-email-card > div > p:last-child,
.account-password-card > div > p:last-child {
  max-width: 660px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.account-card-state {
  margin: 0;
  font: 700 10px/1.5 "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-card-state p {
  margin: 0 0 8px;
}

.account-email-current {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 0;
  padding: 14px 17px;
  border: 1px solid rgba(16, 26, 55, 0.42);
  background: rgba(247, 251, 255, 0.68);
  font-size: 14px;
}

.account-email-current strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.account-email-badge {
  padding: 7px 12px;
  border: 1px solid var(--account-red);
  border-radius: 999px;
  color: var(--account-red);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.account-email-badge.is-confirmed {
  border-color: var(--account-ink);
  background: var(--account-mint);
  color: var(--account-ink);
}

.account-email-note,
.account-email-warning {
  max-width: 660px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.account-email-warning {
  padding-left: 15px;
  border-left: 4px solid #ef5c3e;
}

.account-email-form,
.account-password-form {
  margin-top: 0;
  gap: 22px;
}

.account-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}

.account-email-remove {
  color: var(--account-red);
}

.account-email-card .account-success,
.account-email-card .account-error,
.account-password-card .account-success,
.account-password-card .account-error {
  margin: 0;
}

/* Membership package carried in from a homepage call to action (?plan=) */
.account-plan-intent {
  margin-bottom: 34px;
  padding: clamp(22px, 3.4vw, 34px);
  border: 1px solid var(--account-ink);
  border-left-width: 6px;
  background: var(--account-mint);
}

.account-plan-intent h2 {
  max-width: 720px;
  margin: 10px 0 14px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.14;
}

.account-plan-intent > p:last-child {
  max-width: 620px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.account-trial-intent {
  background:
    radial-gradient(circle at 92% 12%, rgba(45, 154, 239, 0.18), transparent 31%),
    var(--account-mint);
}

.account-trial-promises {
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
}

.account-trial-promises li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
}

.account-trial-promises li::before {
  color: var(--account-red);
  content: "✓";
  font-weight: 700;
}

.account-plan-intent .account-trial-role-note {
  max-width: 720px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 26, 55, 0.2);
  font-size: 12px;
}

.account-learner-trial-handoff {
  display: grid;
  gap: 16px;
  background:
    radial-gradient(circle at 94% 8%, rgba(45, 154, 239, 0.22), transparent 28%),
    var(--account-mint);
}

.account-learner-trial-handoff > p {
  max-width: 760px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.account-learner-trial-actions {
  margin-top: 4px;
}

.account-trial-role-note a,
.account-trial-role-help a {
  color: inherit;
  text-underline-offset: 3px;
}

.account-trial-role-help {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.account-plan-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
}

.account-plan-choice {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 14px 16px;
  border: 1px solid var(--account-ink);
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, transform 160ms ease;
}

.account-plan-choice:hover:not(:disabled) {
  background: var(--account-card);
  transform: translateY(-2px);
}

.account-plan-choice[aria-pressed="true"] {
  border-width: 2px;
  background: var(--account-mint);
}

.account-plan-choice:disabled {
  cursor: wait;
  opacity: 0.56;
}

.account-plan-choice:focus-visible {
  outline: 3px solid var(--account-gold);
  outline-offset: 3px;
}

.account-plan-choice strong {
  font-size: 15px;
}

.account-plan-choice span {
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.account-plan-choice small {
  font-size: 11px;
  opacity: 0.72;
}

/* A grade opens to show who is in it */
.school-grade-open {
  flex: 1 1 220px;
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.school-grade-open strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  overflow-wrap: anywhere;
  font-style: italic;
  font-weight: 400;
}

.school-grade-open small {
  font: 700 11px/1.45 "Courier New", monospace;
  letter-spacing: 0.08em;
}

.school-grade-open:hover strong,
.school-grade-open[aria-expanded="true"] strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Student names are the natural entry point to a record. Keep the entire
   identity block clickable without turning the grade and removal controls
   beside it into part of the same action. */
.school-student-record-toggle {
  display: grid;
  min-width: 0;
  flex: 1 1 220px;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease;
}

.school-student-record-toggle strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.school-student-record-toggle small {
  font: 700 11px/1.45 "Courier New", monospace;
  letter-spacing: 0.06em;
}

.school-student-record-toggle:hover,
.school-student-record-toggle[aria-expanded="true"] {
  border-color: rgba(16, 26, 55, 0.28);
  background: rgba(219, 237, 255, 0.38);
}

.school-student-record-toggle:focus-visible,
.school-assessment-form select:focus-visible,
.school-assess-assignment:focus-visible {
  outline: 3px solid var(--account-red);
  outline-offset: 3px;
}

.school-teacher-open {
  min-width: 0;
}

/* The separator between Score and Maximum, matching the exams page rather than
   falling back to inherited Arial. */
.school-mark-scores > span[aria-hidden] {
  padding-bottom: 10px;
  color: var(--account-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
}

/* A parent's view of the learners they follow */
.account-children {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--account-ink);
  border-radius: 18px;
  background: rgba(247, 251, 255, 0.76);
}

.account-children h3 {
  margin: 4px 0 0;
  font-size: 19px;
}

.account-children-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-children-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 150px) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(16, 26, 55, 0.18);
}

.account-children-list strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.account-children-list small,
.account-children-list b {
  font: 700 11px/1.45 "Courier New", monospace;
  letter-spacing: 0.08em;
}

.account-children-note {
  margin: 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.8;
}

@media (max-width: 620px) {
  .account-children-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .account-children-list li > span[role="img"] {
    grid-column: 1 / -1;
  }
}

/* Student assignment documents stay compact inside the main Account card.
   The API supplies private, authenticated download URLs; these rules only
   clarify the filename and size without turning each file into a large card. */
.account-assignment-attachments {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.account-assignment-attachments-label {
  color: rgba(16, 26, 55, 0.68);
  font: 700 9px/1.3 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-assignment-attachments ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-assignment-attachments a {
  display: inline-flex;
  max-width: min(100%, 430px);
  min-height: 34px;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 7px 10px;
  border: 1px solid rgba(16, 26, 55, 0.24);
  border-radius: 8px;
  color: var(--account-ink);
  background: rgba(255, 255, 255, 0.28);
  text-decoration: none;
}

.account-assignment-attachments a:hover,
.account-assignment-attachments a:focus-visible {
  border-color: var(--account-red);
  color: var(--account-red);
}

.account-assignment-attachments a span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.account-assignment-attachments a span:last-child {
  flex: 0 0 auto;
  color: rgba(16, 26, 55, 0.66);
  font: 700 9px/1.3 "Courier New", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .account-assignment-attachments ul,
  .account-assignment-attachments li,
  .account-assignment-attachments a {
    width: 100%;
  }
}

/* Connecting a parent account to the learners it follows */
.admin-parent-links {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.admin-parent-links h3 {
  margin: 0;
  font-size: 15px;
}

.admin-parent-links p {
  margin: 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}

.admin-parent-link-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-parent-link-list li {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.16);
}

.admin-parent-link-list strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* A school or teacher's own learning record, demoted to the foot of the page */
.account-own-record {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 20px 22px;
  border: 1px solid rgba(16, 26, 55, 0.32);
  background: rgba(16, 26, 55, 0.03);
}

.account-own-record h3 {
  margin: 0 0 6px;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25;
}

.account-own-record p:last-child {
  max-width: 62ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.8;
}

.account-own-record-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.account-own-record-links a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid currentColor;
  font: 700 12px/1.2 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Adding people, gathered at the foot instead of sitting above the lists */
.school-add-people {
  margin: 18px 0;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--account-ink);
  background: var(--account-card);
}

.school-add-people > header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--account-ink);
}

.school-add-people h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(19px, 2vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}

.school-add-people-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 34px;
}

.school-add-people-forms h3 {
  margin: 14px 0 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
}

.school-add-people-forms .school-member-form {
  max-width: none;
}

/* School and teacher mission control, assignment matching, and honest signal
   charts. No dashboard panel has its own scroll container, so it remains
   usable on short phones and with keyboard zoom. */
.school-command-center,
.school-signal-board {
  margin: 18px 0;
  padding: clamp(22px, 3.5vw, 40px);
  border: 1px solid var(--account-ink);
  border-radius: 26px 26px 8px 26px;
  background: var(--account-card);
}

.school-command-center {
  background:
    radial-gradient(circle at 92% 10%, rgba(45, 154, 239, 0.2), transparent 25%),
    var(--account-card);
}

.school-command-header,
.school-signal-board > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--account-ink);
}

.school-command-header h2,
.school-signal-board > header h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(29px, 3.8vw, 48px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.school-command-header > div > p:last-child,
.school-signal-board > header > p {
  max-width: 620px;
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.58;
}

.school-signal-board > header > p {
  margin: 0;
}

.school-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.school-command-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--account-ink);
  border-radius: 999px;
  background: rgba(247, 251, 255, 0.7);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.school-command-actions a:hover,
.school-command-actions a:focus-visible {
  background: var(--account-ink);
  color: var(--account-paper);
}

.school-command-actions a:focus-visible,
.school-command-attention a:focus-visible,
.school-assignment-topic-actions a:focus-visible,
.school-assignment-topic-actions button:focus-visible,
.school-assignment-filters input:focus-visible,
.school-assignment-filters select:focus-visible {
  outline: 3px solid var(--account-red);
  outline-offset: 3px;
}

.school-command-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin: 18px 0 0;
  border: 1px solid var(--account-ink);
  border-radius: 16px;
  overflow: hidden;
}

.school-command-stats > div {
  display: grid;
  min-height: 112px;
  gap: 8px;
  align-content: end;
  padding: 18px;
  border-right: 1px solid rgba(16, 26, 55, 0.24);
  background: rgba(247, 251, 255, 0.52);
}

.school-command-stats > div:last-child {
  border-right: 0;
}

.school-command-stats dt {
  font: 700 9px/1.3 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.school-command-stats dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-style: italic;
  line-height: 1;
}

.school-command-stats dd small {
  font: 700 8px/1.4 "Courier New", monospace;
  letter-spacing: 0.04em;
  opacity: 0.62;
}

.school-command-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.school-command-progress,
.school-command-attention {
  min-width: 0;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--account-ink);
  border-radius: 18px;
}

.school-command-progress {
  background: var(--account-mint);
}

.school-command-attention {
  background: rgba(45, 154, 239, 0.13);
}

.school-command-progress h3,
.school-command-attention h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(21px, 2vw, 27px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
}

.school-command-progress-row {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.school-command-progress-row > div {
  display: grid;
  grid-template-columns: minmax(104px, 0.72fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.school-command-progress-row strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 1.45vw, 20px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.school-command-progress progress,
.school-signal-chart progress {
  width: 100%;
  height: 11px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  accent-color: var(--account-red);
  background: rgba(16, 26, 55, 0.13);
}

.school-command-progress progress::-webkit-progress-bar,
.school-signal-chart progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(16, 26, 55, 0.13);
}

.school-command-progress progress::-webkit-progress-value,
.school-signal-chart progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--account-red), var(--account-gold));
}

.school-command-progress progress::-moz-progress-bar,
.school-signal-chart progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--account-red), var(--account-gold));
}

.school-command-caption {
  margin: 15px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(16, 26, 55, 0.2);
  font-size: 11px;
  line-height: 1.5;
}

.school-command-attention ul,
.school-signal-list,
.school-assignment-topic-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.school-command-attention ul {
  margin-top: 14px;
}

.school-command-attention li {
  border-top: 1px solid rgba(16, 26, 55, 0.17);
}

.school-command-attention li a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 68px;
  padding: 9px 2px;
}

.school-command-attention li a > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  font-style: italic;
  font-weight: 400;
}

.school-command-attention li a > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.school-command-attention li b,
.school-command-attention li small {
  font-size: 11px;
  line-height: 1.4;
}

.school-command-attention li b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
}

.school-command-attention li small {
  opacity: 0.72;
}

.school-command-clear,
.school-signal-empty {
  margin: 18px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
}

.school-command-clear {
  max-width: 46ch;
  margin-top: 14px;
  font-size: clamp(14px, 1.35vw, 16px);
}

.school-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.school-signal-chart {
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 2.8vw, 31px);
  border: 1px solid var(--account-ink);
  border-radius: 18px;
  background: rgba(247, 251, 255, 0.58);
}

.school-signal-chart:first-child {
  background: var(--account-mint);
}

.school-signal-chart figcaption h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(22px, 2.5vw, 31px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
}

.school-signal-chart figcaption p {
  margin: 11px 0 0;
  font-size: 11px;
  line-height: 1.52;
}

.school-signal-list > li {
  padding: 14px 0;
  border-top: 1px solid rgba(16, 26, 55, 0.18);
}

.school-signal-list > li > header {
  display: flex;
  gap: 13px;
  align-items: baseline;
  justify-content: space-between;
}

.school-signal-list > li > header strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

.school-signal-list > li > header span,
.school-signal-list > li > small {
  font: 700 8px/1.4 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.school-class-signal-bars {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.school-class-signal-bars > div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 36px;
  gap: 9px;
  align-items: center;
}

.school-class-signal-bars span,
.school-class-signal-bars b,
.school-assignment-signal-row b {
  font: 700 8px/1 "Courier New", monospace;
  text-transform: uppercase;
}

.school-class-signal-bars b,
.school-assignment-signal-row b {
  text-align: right;
}

.school-assignment-signal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
  margin: 10px 0 7px;
}

.school-assignment-studio {
  margin: 16px 0 22px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--account-ink);
  border-radius: 20px;
  background:
    radial-gradient(circle at 96% 4%, rgba(8, 102, 217, 0.15), transparent 22%),
    var(--account-mint);
}

.school-assignment-studio h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(24px, 3vw, 36px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
}

.school-assignment-studio > header p:last-child {
  max-width: 670px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.school-assignment-filters {
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) repeat(2, minmax(150px, 0.65fr));
  gap: 10px;
  margin-top: 20px;
}

.school-assignment-filters label {
  display: grid;
  gap: 7px;
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.school-assignment-filters input,
.school-assignment-filters select {
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid var(--account-ink);
  border-radius: 0;
  background: var(--account-card);
  color: var(--account-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}

.school-assignment-match-count {
  margin: 14px 0 0;
  font: 700 9px/1.4 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.school-assignment-topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.school-assignment-topic-list article {
  display: grid;
  min-height: 204px;
  gap: 18px;
  align-content: space-between;
  padding: 18px;
  border: 1px solid rgba(16, 26, 55, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.77);
}

.school-assignment-topic-list article > div:first-child > span {
  font: 700 8px/1.4 "Courier New", monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.school-assignment-topic-list h4 {
  margin: 8px 0 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
}

.school-assignment-topic-list p {
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.school-assignment-topic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}

.school-assignment-topic-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid currentColor;
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.school-assignment-form.school-member-form {
  max-width: none;
  margin: 22px 0;
  padding: clamp(18px, 2.5vw, 30px);
  border: 1px solid rgba(16, 26, 55, 0.36);
  border-left: 6px solid var(--account-red);
  border-radius: 0 22px 22px 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(237, 245, 255, 0.78));
}

.school-assignment-editor-header,
.school-assignment-editor-footer {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.school-assignment-editor-header h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(22px, 2.4vw, 31px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
}

.school-assignment-editor-header > span,
.school-assignment-editor-footer p {
  max-width: 320px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.7;
}

.school-assignment-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: 12px;
}

.school-assignment-editor-grid fieldset {
  display: grid;
  min-width: 0;
  gap: 15px;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(16, 26, 55, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.school-assignment-editor-grid legend {
  padding: 0 8px;
  font: 700 10px/1.3 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.school-assignment-editor-grid legend span {
  margin-right: 7px;
  color: var(--account-red);
}

.school-assignment-brief-fields {
  grid-row: span 2;
}

.school-assignment-editor-grid label {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.school-assignment-delivery-fields label > span {
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.66;
  text-transform: none;
}

.school-assignment-editor-grid input,
.school-assignment-editor-grid select,
.school-assignment-editor-grid textarea {
  width: 100%;
  min-width: 0;
  border-color: rgba(16, 26, 55, 0.52);
  background: rgba(255, 255, 255, 0.9);
}

.school-assignment-editor-grid textarea {
  min-height: 215px;
  resize: vertical;
  line-height: 1.55;
}

.school-assignment-writing-tools {
  display: grid;
  gap: 8px;
}

.school-assignment-writing-tools > span,
.school-assignment-file-types,
.school-assignment-brief-fields > small {
  margin: 0;
  font: 700 8px/1.5 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.school-assignment-writing-tools > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.school-assignment-writing-tools button,
.school-assignment-pending-files button,
.school-assignment-attachment-list button,
.school-assignment-inline-upload span {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(16, 26, 55, 0.34);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 700 8px/1.2 "Courier New", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.school-assignment-file-fields {
  align-content: start;
}

.school-assignment-file-picker {
  padding: 14px;
  border: 1px dashed rgba(16, 26, 55, 0.46);
  border-radius: 12px;
  background: rgba(219, 237, 255, 0.3);
  cursor: pointer;
}

.school-assignment-file-picker > span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}

.school-assignment-file-picker input {
  min-height: 42px;
  padding: 6px;
  font-size: 11px;
}

.school-assignment-pending-files,
.school-assignment-attachment-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-assignment-pending-files li,
.school-assignment-attachment-list li {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(16, 26, 55, 0.16);
}

.school-assignment-pending-files li > span,
.school-assignment-attachment-list li > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.school-assignment-pending-files strong,
.school-assignment-attachment-list a {
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.35;
}

.school-assignment-pending-files small,
.school-assignment-attachment-list small {
  font: 700 8px/1.3 "Courier New", monospace;
  opacity: 0.66;
}

.school-assignment-editor-footer {
  align-items: center;
  padding-top: 4px;
}

.school-assignment-editor-footer .account-primary-action {
  margin: 0;
  white-space: nowrap;
}

.school-assignment-card {
  display: grid !important;
  gap: 14px !important;
  padding: clamp(16px, 2.2vw, 22px) !important;
  border: 1px solid rgba(16, 26, 55, 0.26) !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
}

.school-assignment-card > header,
.school-assignment-card > footer,
.school-assignment-file-manager > header {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.school-assignment-card > header > span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.school-assignment-card-badges {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.school-assignment-card-badges b {
  padding: 5px 8px;
  border: 1px solid rgba(16, 26, 55, 0.24);
  border-radius: 999px;
  font: 700 8px/1.2 "Courier New", monospace;
  text-transform: uppercase;
}

.school-assignment-card-details {
  max-width: 900px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.school-assignment-file-manager {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(16, 26, 55, 0.18);
  border-radius: 10px;
  background: rgba(219, 237, 255, 0.18);
}

.school-assignment-file-manager h4 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.school-assignment-file-manager > p {
  margin: 0;
  font-size: 11px;
  opacity: 0.66;
}

.school-assignment-inline-upload {
  /* Positioned so the clipped file input inside it resolves against this
     label rather than escaping to a distant ancestor. Focusing a hidden
     control that has drifted elsewhere makes the browser scroll there, which
     reads as the page jumping away from the button just pressed. Anchoring it
     here keeps that scroll a no-op without making anything fixed. */
  position: relative;
  display: inline-flex;
  justify-self: start;
  cursor: pointer;
}

.school-assignment-inline-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.school-assignment-card > footer > small {
  font: 700 8px/1.4 "Courier New", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.65;
}

.school-student-assignment-files {
  flex: 1 0 100%;
  width: 100%;
  padding: 7px 0 0;
}

.school-report {
  margin: 24px 0;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--account-ink);
  border-radius: 24px 24px 6px 24px;
  background:
    radial-gradient(circle at 94% 4%, rgba(8, 102, 217, 0.15), transparent 24%),
    linear-gradient(145deg, rgba(219, 237, 255, 0.7), rgba(255, 255, 255, 0.96));
}

.school-report-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}

.school-report-header h2 {
  max-width: 760px;
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(28px, 4vw, 48px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.02;
}

.school-report-header p:last-child {
  max-width: 660px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.school-report-source-badge {
  padding: 8px 11px;
  border: 1px solid rgba(16, 26, 55, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font: 700 8px/1.2 "Courier New", monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.school-report-controls.account-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  gap: 11px;
  align-items: end;
  max-width: none;
  margin: 24px 0 0;
  padding: 16px;
  border: 1px solid rgba(16, 26, 55, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.school-report-controls label {
  display: grid;
  gap: 7px;
}

.school-report-controls select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--account-ink);
  background: var(--account-card);
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}

.school-report-build {
  min-height: 46px;
  margin: 0;
  white-space: nowrap;
}

.school-report-downloads {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(16, 26, 55, 0.16);
}

.school-report-downloads button:disabled {
  cursor: not-allowed;
  opacity: 0.44;
}

.school-report-announcer {
  min-height: 0;
}

.school-report-preview {
  display: grid;
  gap: 20px;
  margin-top: 14px;
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: 18px;
  background: var(--account-ink);
  color: var(--account-paper);
}

.school-report-preview > header {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(247, 251, 255, 0.28);
}

.school-report-preview h3,
.school-report-preview h4 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-style: normal;
  font-weight: 400;
}

.school-report-preview h3 {
  font-size: clamp(25px, 3vw, 38px);
}

.school-report-preview h4 {
  font-size: 21px;
}

.school-report-preview > header small {
  font: 700 8px/1.4 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.school-report-executive-summary {
  display: grid;
  gap: 8px;
  max-width: 880px;
}

.school-report-executive-summary p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.school-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 251, 255, 0.26);
  border-radius: 14px;
  background: rgba(247, 251, 255, 0.22);
}

.school-report-kpis > div {
  display: grid;
  min-height: 126px;
  gap: 7px;
  align-content: space-between;
  padding: 16px;
  background: rgba(16, 26, 55, 0.96);
}

.school-report-kpis dt,
.school-report-kpis small {
  font: 700 8px/1.45 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.school-report-kpis dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2.5vw, 32px);
  font-style: italic;
}

.school-report-chart {
  margin: 0;
}

.school-report-chart figcaption {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.school-report-chart figcaption strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
}

.school-report-chart figcaption span {
  font-size: 11px;
  opacity: 0.72;
}

.school-report-chart ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-report-chart li {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid rgba(247, 251, 255, 0.24);
  border-radius: 12px;
}

.school-report-chart li > header,
.school-report-chart li > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.school-report-chart li > header {
  grid-template-columns: minmax(0, 1fr) auto;
}

.school-report-chart span,
.school-report-chart b,
.school-report-chart em,
.school-report-chart small {
  font: 700 8px/1.3 "Courier New", monospace;
  text-transform: uppercase;
}

.school-report-chart b,
.school-report-chart em {
  text-align: right;
}

.school-report-chart progress {
  width: 100%;
  height: 7px;
}

.school-report-chart em {
  grid-column: 2 / -1;
  opacity: 0.66;
}

.school-report-table-section {
  min-width: 0;
}

.school-report-table-section > header {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}

.school-report-table-section > header span {
  font: 700 8px/1.3 "Courier New", monospace;
  text-transform: uppercase;
}

.school-report-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(247, 251, 255, 0.24);
  border-radius: 10px;
}

.school-report-table-wrap table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: inherit;
}

.school-report-table-wrap th,
.school-report-table-wrap td {
  padding: 10px;
  border-bottom: 1px solid rgba(247, 251, 255, 0.16);
  text-align: left;
  font-size: 10px;
}

.school-report-table-wrap thead th {
  background: rgba(247, 251, 255, 0.1);
  font: 700 8px/1.3 "Courier New", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.school-report-next-checks {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(247, 251, 255, 0.22);
  border-radius: 12px;
}

.school-report-next-checks ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-report-next-checks li {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: rgba(247, 251, 255, 0.08);
}

.school-report-next-checks li strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-style: italic;
}

.school-report-next-checks li span {
  font-size: 10px;
  line-height: 1.4;
}

.school-report-notes {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(247, 251, 255, 0.22);
}

.school-report-notes p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  opacity: 0.78;
}

.school-report-placeholder {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed rgba(16, 26, 55, 0.34);
  border-radius: 12px;
}

.school-report-placeholder span {
  font-size: 28px;
}

.school-report-placeholder p {
  max-width: 720px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.school-match-assignment {
  flex: 0 0 auto;
  min-height: 40px;
  font-size: 9px;
}

@media (max-width: 840px) {
  .school-command-header,
  .school-signal-board > header,
  .school-command-panels,
  .school-signal-grid {
    grid-template-columns: 1fr;
  }

  .school-command-actions {
    justify-content: flex-start;
  }

  .school-account-summary,
  .school-assignment-editor-grid,
  .school-report-header,
  .school-report-next-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .school-assignment-brief-fields {
    grid-row: auto;
  }

  .school-report-controls.account-form,
  .school-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .school-report-build {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .school-command-center,
  .school-signal-board {
    padding: 20px 16px;
    border-radius: 18px 18px 6px 18px;
  }

  .school-command-stats,
  .school-assignment-filters,
  .school-assignment-topic-list {
    grid-template-columns: 1fr;
  }

  .school-command-stats > div {
    min-height: 92px;
    border-right: 0;
    border-bottom: 1px solid rgba(16, 26, 55, 0.24);
  }

  .school-command-stats > div:last-child {
    border-bottom: 0;
  }

  .school-command-progress,
  .school-command-attention {
    padding: 17px 15px;
  }

  .school-command-progress-row > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .school-class-signal-bars > div {
    grid-template-columns: 64px minmax(0, 1fr) 32px;
  }

  .school-assignment-topic-list article {
    min-height: 0;
  }

  .school-assignment-form.school-member-form {
    padding: 18px 14px;
  }

  .school-student-record-card {
    gap: 15px;
    padding: 16px 12px;
    border-radius: 14px 14px 5px 14px;
  }

  .school-student-record-header {
    align-items: flex-start;
  }

  .school-assessment-form.school-mark-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 12px;
  }

  .school-assessment-form > label:first-child,
  .school-assessment-form .school-mark-scores,
  .school-assessment-form > button {
    grid-column: 1;
  }

  .school-student-record-toggle {
    flex-basis: 100%;
  }

  .school-seat-counts > div,
  .school-report-controls.account-form,
  .school-report-kpis,
  .school-report-next-checks ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .school-seat-unlimited {
    justify-self: start;
  }

  .school-assignment-editor-header,
  .school-assignment-editor-footer,
  .school-assignment-card > header,
  .school-assignment-card > footer,
  .school-report-preview > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .school-assignment-card-badges {
    justify-content: flex-start;
  }

  .school-assignment-editor-footer .account-primary-action,
  .school-report-build {
    width: 100%;
    justify-content: center;
  }

  .school-report,
  .school-report-preview {
    padding: 18px 14px;
    border-radius: 18px 18px 5px 18px;
  }

  .school-report-source-badge {
    justify-self: start;
  }

  .school-report-downloads {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .school-assignment-pending-files li,
  .school-assignment-attachment-list li {
    flex-wrap: wrap;
  }

  .school-assignment-pending-files li > span,
  .school-assignment-attachment-list li > span {
    flex: 1 1 180px;
  }
}

/* Role-aware Account mission control. The figures come from the same private
   progress, assignment and family APIs as the detailed pages below it. */
.account-mission-control {
  position: relative;
  display: grid;
  gap: 20px;
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid var(--account-ink);
  border-radius: 30px 30px 8px 30px;
  background:
    radial-gradient(circle at 92% 8%, rgba(45, 154, 239, 0.22), transparent 25%),
    var(--account-card);
}

.account-mission-control::after {
  position: absolute;
  top: -138px;
  right: -104px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(16, 26, 55, 0.11);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.account-mission-control--student { --mission-accent: #a53425; }
.account-mission-control--parent { --mission-accent: #73520e; }
.account-mission-control--school { --mission-accent: #35624f; }
.account-mission-control--teacher { --mission-accent: #365a83; }
.account-mission-control--administrator { --mission-accent: #a53425; }

.account-mission-header,
.account-mission-summary,
.account-mission-role-panel,
.account-mission-notice,
.account-mission-actions {
  position: relative;
  z-index: 1;
}

.account-mission-header {
  display: flex;
  gap: 24px;
  align-items: start;
  justify-content: space-between;
}

.account-mission-intro h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(30px, 4vw, 50px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.account-mission-intro > p:last-child {
  max-width: 690px;
  margin: 15px 0 0;
  font-size: 14px;
  line-height: 1.62;
}

.account-mission-role-badge {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 10px 13px 0;
  border: 1px solid var(--account-ink);
  border-radius: 999px;
  background: var(--mission-accent);
  color: var(--account-paper);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-mission-summary {
  display: grid;
  grid-template-columns: auto minmax(230px, 1fr) minmax(250px, 0.92fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(16, 26, 55, 0.38);
  border-radius: 20px;
  background: rgba(247, 251, 255, 0.66);
}

.account-mission-summary--parent {
  background: rgba(45, 154, 239, 0.1);
  background: color-mix(in srgb, var(--account-gold) 10%, var(--account-paper));
}

.account-mission-orbit.progress-orbit-meter {
  width: 150px;
  height: 150px;
}

.account-mission-orbit.progress-orbit-meter::before {
  width: 120px;
  height: 120px;
}

.account-mission-orbit.progress-orbit-meter strong {
  font-size: 38px;
}

.account-mission-orbit-state {
  display: grid;
  width: 150px;
  aspect-ratio: 1;
  place-items: center;
  padding: 22px;
  border: 1px dashed var(--account-ink);
  border-radius: 50%;
  font: 700 9px/1.45 "Courier New", monospace;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.account-mission-next h3,
.account-mission-role-panel h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
}

.account-mission-next > p:not(.account-kicker),
.account-mission-role-panel p:last-child {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.account-mission-next > a {
  display: inline-flex;
  min-height: 44px;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 0 15px;
  border: 1px solid var(--account-ink);
  border-radius: 999px;
  background: var(--account-ink);
  color: var(--account-paper);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-mission-next > a:hover {
  background: var(--mission-accent);
}

.account-mission-metrics.progress-stats {
  border-top: 0;
}

.account-mission-metrics.progress-stats > div:first-child {
  border-top: 1px solid rgba(16, 26, 55, 0.22);
}

.account-mission-metrics.progress-stats dd {
  font-size: 23px;
}

.account-mission-role-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 42px);
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--account-ink);
  border-radius: 20px;
  background: var(--account-mint);
}

.account-mission-role-mark {
  display: grid;
  width: 92px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--account-ink);
  border-radius: 50%;
  background: var(--mission-accent);
  color: var(--account-paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-style: italic;
}

.account-mission-notice {
  margin: 0;
  padding: 12px 15px;
  border-left: 4px solid var(--account-gold);
  background: rgba(45, 154, 239, 0.14);
  font-size: 12px;
  line-height: 1.5;
}

.account-mission-actions.account-destination-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--account-ink);
  border-radius: 18px;
  overflow: hidden;
}

.account-mission-action.account-destination {
  min-height: 202px;
  padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.76);
}

.account-mission-action.account-destination:nth-child(odd) {
  border-left: 0;
}

.account-mission-action.account-destination:nth-child(n + 3) {
  border-top: 1px solid var(--account-ink);
}

.account-mission-action.account-destination:hover,
.account-mission-action.account-destination:focus-visible {
  background: var(--mission-accent);
  color: var(--account-paper);
}

.account-mission-action small {
  display: block;
  margin-bottom: 8px;
}

.account-mission-action p {
  margin-top: 9px;
}

.account-mission-next > a:focus-visible,
.account-mission-action:focus-visible {
  outline: 3px solid var(--account-red);
  outline-offset: 3px;
}

@media (max-width: 920px) {
  .account-mission-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-mission-metrics {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }
}

@media (max-width: 620px) {
  .account-mission-control {
    padding: 23px 18px;
    border-radius: 21px 21px 6px 21px;
  }

  .account-mission-header,
  .account-mission-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .account-mission-role-badge,
  .account-mission-orbit,
  .account-mission-orbit-state {
    justify-self: start;
  }

  .account-mission-metrics,
  .account-mission-actions.account-destination-grid {
    grid-template-columns: 1fr;
  }

  .account-mission-action.account-destination {
    min-height: 180px;
    border-top: 1px solid var(--account-ink);
    border-left: 0;
  }

  .account-mission-action.account-destination:first-child {
    border-top: 0;
  }

  .account-mission-role-panel {
    grid-template-columns: 1fr;
  }

  .account-mission-role-mark {
    width: 76px;
    font-size: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-mission-action.account-destination,
  .account-mission-next > a,
  .school-student-record-toggle {
    transition: none;
  }
}

/* Administrator mission control: an overview first, with the existing account
   tools kept in dedicated workspaces instead of one very long page. */
.admin-client [hidden] {
  display: none !important;
}

.admin-dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-bottom: 18px;
  padding: clamp(24px, 4vw, 46px);
  overflow: hidden;
  border: 1px solid var(--account-ink);
  border-radius: 28px 28px 8px 28px;
  background:
    radial-gradient(circle at 82% 22%, rgba(45, 154, 239, 0.22), transparent 28%),
    linear-gradient(135deg, var(--account-card), rgba(219, 237, 255, 0.78));
}

.admin-dashboard-hero::after {
  position: absolute;
  right: -70px;
  bottom: -124px;
  width: 330px;
  height: 230px;
  border: 1px solid rgba(16, 26, 55, 0.16);
  border-radius: 50%;
  transform: rotate(-18deg);
  content: "";
  pointer-events: none;
}

.admin-dashboard-hero h2,
.admin-overview-heading h2 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(31px, 4vw, 54px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.admin-dashboard-hero > div:first-child > p:last-child {
  max-width: 680px;
  margin: 15px 0 0;
  font-size: 14px;
  line-height: 1.65;
}

.admin-dashboard-orbit {
  --admin-orbit-progress: 0deg;
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(126px, 14vw, 168px);
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--account-red) 0 var(--admin-orbit-progress),
    rgba(16, 26, 55, 0.12) var(--admin-orbit-progress) 360deg
  );
}

.admin-dashboard-orbit::before {
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(16, 26, 55, 0.28);
  border-radius: 50%;
  background: var(--account-card);
  content: "";
}

.admin-dashboard-orbit strong,
.admin-dashboard-orbit span {
  position: relative;
  z-index: 1;
}

.admin-dashboard-orbit strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 4vw, 45px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.admin-dashboard-orbit span {
  margin-top: 5px;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-dashboard-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 30px;
  padding: 7px;
  border: 1px solid var(--account-ink);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-dashboard-nav button {
  display: flex;
  min-height: 52px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--account-ink);
  cursor: pointer;
  font: 700 10px/1.2 "Courier New", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-dashboard-nav button > span {
  opacity: 0.54;
}

.admin-dashboard-nav button > b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--account-red);
  color: white;
  font-size: 9px;
}

.admin-dashboard-nav button:hover,
.admin-dashboard-nav button[aria-current="page"] {
  background: var(--account-ink);
  color: var(--account-paper);
  transform: translateY(-2px);
}

.admin-dashboard-nav button:focus-visible,
.admin-quick-actions a:focus-visible,
.admin-quick-actions button:focus-visible,
.admin-recent-accounts button:focus-visible,
.admin-detail h2:focus-visible {
  outline: 3px solid var(--account-red);
  outline-offset: 3px;
}

.admin-dashboard-overview {
  display: grid;
  gap: 24px;
}

.admin-overview-heading {
  display: flex;
  gap: 24px;
  align-items: end;
  justify-content: space-between;
}

.admin-overview-heading h2 {
  font-size: clamp(28px, 3.4vw, 44px);
}

.admin-overview-heading > p {
  max-width: 390px;
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.admin-metric-grid > div {
  position: relative;
  display: grid;
  min-height: 156px;
  gap: 8px;
  align-content: end;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--account-ink);
  border-radius: 10px 26px 10px 10px;
  background: var(--account-card);
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.admin-metric-grid > div::after {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--metric-colour, var(--account-red));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--metric-colour, var(--account-red)) 18%, transparent);
  content: "";
}

.admin-metric-grid > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 rgba(16, 26, 55, 0.09);
}

.admin-metric-grid .is-coral { --metric-colour: var(--account-red); }
.admin-metric-grid .is-gold { --metric-colour: var(--account-gold); }
.admin-metric-grid .is-mint { --metric-colour: #5d947e; }
.admin-metric-grid .is-dark {
  --metric-colour: var(--account-gold);
  background: var(--account-ink);
  color: var(--account-paper);
}

.admin-metric-grid dt {
  order: 2;
  font: 700 9px/1.25 "Courier New", monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.admin-metric-grid dd {
  order: 1;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 58px);
  font-style: italic;
  line-height: 0.9;
}

.admin-metric-grid small {
  order: 3;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.7;
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 12px;
}

.admin-role-chart,
.admin-attention-panel,
.admin-recent-accounts {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--account-ink);
  border-radius: 22px;
  background: var(--account-card);
}

.admin-role-chart > header,
.admin-recent-accounts > header {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.admin-role-chart h3,
.admin-attention-panel h3,
.admin-recent-accounts h3 {
  margin: 0;
  font-family: var(--ui-font, Arial, sans-serif);
  font-size: clamp(23px, 2.6vw, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
}

.admin-role-chart > header > strong {
  padding: 7px 10px;
  border: 1px solid var(--account-ink);
  border-radius: 999px;
  font: 700 9px/1 "Courier New", monospace;
  text-transform: uppercase;
}

.admin-role-chart ul,
.admin-recent-accounts ul {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.admin-role-chart li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(16, 26, 55, 0.14);
  font-size: 12px;
}

.admin-role-chart li > div {
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 55, 0.25);
  border-radius: 99px;
  background: rgba(16, 26, 55, 0.06);
}

.admin-role-chart li i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--account-red), var(--account-gold));
}

.admin-role-chart li strong {
  font: 700 10px/1 "Courier New", monospace;
  text-align: right;
}

.admin-attention-panel {
  display: grid;
  align-content: start;
  background: var(--account-mint);
}

.admin-attention-panel > p:not(.account-kicker) {
  margin: 15px 0 24px;
  font-size: 13px;
  line-height: 1.55;
}

.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-quick-actions a,
.admin-quick-actions button {
  display: flex;
  min-height: 54px;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--account-ink);
  border-radius: 10px;
  background: var(--account-card);
  color: var(--account-ink);
  cursor: pointer;
  font: 700 9px/1.25 "Courier New", monospace;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
}

.admin-quick-actions a:hover,
.admin-quick-actions button:hover {
  background: var(--account-ink);
  color: var(--account-paper);
}

.admin-recent-accounts > header .account-text-button {
  min-height: 44px;
}

.admin-recent-accounts li {
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid rgba(16, 26, 55, 0.16);
}

.admin-recent-accounts li > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.admin-recent-accounts li small,
.admin-recent-accounts li > span:nth-child(3) {
  font: 700 9px/1.4 "Courier New", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-recent-accounts li > button {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--account-ink);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 700 9px/1 "Courier New", monospace;
  text-transform: uppercase;
}

.admin-recent-accounts li > button:hover {
  background: var(--account-ink);
  color: var(--account-paper);
}

.admin-control-deck.is-overview,
.admin-control-deck.is-requests {
  display: none;
}

.admin-control-deck.is-accounts {
  display: grid;
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(24px, 3vw, 38px);
  align-items: start;
}

.admin-control-deck.is-accounts .admin-workspace {
  display: block;
  min-width: 0;
}

.admin-control-deck.is-accounts .admin-detail {
  min-width: 0;
  margin-top: 0;
  padding: clamp(25px, 3.2vw, 40px);
}

.admin-control-deck.is-accounts .admin-detail > header {
  grid-template-columns: 1fr;
}

.admin-control-deck.is-accounts .admin-detail dl {
  justify-content: start;
}

.admin-control-deck.is-accounts .admin-detail dl > div {
  text-align: left;
}

.admin-control-deck.is-accounts .admin-detail-columns {
  grid-template-columns: 1fr;
}

.admin-control-deck.is-create {
  display: block;
}

.admin-control-deck.is-create .admin-workspace {
  display: block;
}

.admin-control-deck.is-create .admin-create-card {
  max-width: 780px;
  margin: 0 auto;
}

.admin-client > .admin-tutor-requests {
  margin-top: 0;
}

@media (max-width: 1060px) {
  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-overview-grid,
  .admin-control-deck.is-accounts {
    grid-template-columns: 1fr;
  }

  .admin-control-deck.is-accounts .admin-detail {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .admin-dashboard-hero {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-orbit {
    width: 126px;
    justify-self: start;
  }

  .admin-dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-overview-heading {
    display: grid;
  }

  .admin-overview-heading > p {
    text-align: left;
  }

  .admin-recent-accounts li {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .admin-recent-accounts li > span:nth-child(3) {
    grid-column: 2;
  }

  .admin-recent-accounts li > button {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (max-width: 520px) {
  .admin-dashboard-hero {
    padding: 24px 20px;
    border-radius: 20px 20px 6px 20px;
  }

  .admin-dashboard-nav,
  .admin-metric-grid,
  .admin-quick-actions {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-nav button {
    justify-content: flex-start;
  }

  .admin-metric-grid > div {
    min-height: 134px;
  }

  .admin-role-chart,
  .admin-attention-panel,
  .admin-recent-accounts {
    padding: 21px 17px;
    border-radius: 16px;
  }

  .admin-recent-accounts li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-recent-accounts .admin-user-avatar,
  .admin-recent-accounts li > span:nth-child(3) {
    display: none;
  }

  .admin-recent-accounts li > button {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-dashboard-nav button,
  .admin-metric-grid > div {
    transition: none;
  }

  .admin-dashboard-nav button:hover,
  .admin-dashboard-nav button[aria-current="page"],
  .admin-metric-grid > div:hover {
    transform: none;
  }
}

/* Account dashboard and private Settings are deliberately separate. The
   profile is a compact orientation strip; recovery, billing, and destructive
   controls have room to breathe on their own route. */
.account-dashboard-main {
  gap: clamp(18px, 3vw, 30px);
}

.account-dashboard-main .account-identity {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(14px, 2vw, 20px);
  border-radius: 16px;
}

.account-dashboard-main .account-avatar {
  width: 58px;
  height: 58px;
  font-size: 30px;
}

.account-dashboard-main .account-identity h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
}

.account-dashboard-main .account-identity h2 ~ p {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
}

.account-dashboard-main .account-identity > .account-text-button {
  min-height: 36px;
  padding: 6px 0;
  font-size: 10px;
}

.account-settings-dashboard {
  gap: clamp(18px, 3vw, 30px);
}

.account-settings-hero h1 {
  font-size: clamp(46px, 8vw, 88px);
}

.account-settings-page .account-subpage-hero {
  margin-bottom: clamp(28px, 5vw, 54px);
}

@media (max-width: 620px) {
  .account-dashboard-main .account-identity {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px 14px;
    padding: 13px;
  }

  .account-dashboard-main .account-avatar {
    width: 48px;
    height: 48px;
    font-size: 25px;
  }

  .account-dashboard-main .account-identity > .account-text-button {
    grid-column: 2;
    justify-self: start;
  }

  .account-settings-hero h1 {
    font-size: clamp(42px, 15vw, 64px);
  }
}

/* --------------------------------------------------------------------------
   Account cockpit · 2026
   The main account route is a compact application dashboard. Settings keeps
   the roomier document layout above. Every panel follows the page's natural
   scroll; there are no viewport-height shells or nested vertical scrollers.
   -------------------------------------------------------------------------- */

.account-page:not(.account-subpage) {
  width: min(100%, 1240px);
  padding-top: 30px;
}

.account-page:not(.account-subpage) > .account-back {
  margin-bottom: 24px;
}

.account-client {
  min-width: 0;
}

.account-section-nav {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 28px rgba(16, 26, 55, 0.06);
}

.account-auth-layout {
  overflow: hidden;
  border-radius: 28px 28px 8px 28px;
  box-shadow: 0 24px 70px rgba(16, 26, 55, 0.14);
}

.account-auth-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), transparent 48%),
    var(--account-card);
}

.account-auth-note {
  background:
    radial-gradient(circle at 82% 16%, rgba(45, 154, 239, 0.28), transparent 24%),
    radial-gradient(circle at 4% 88%, rgba(219, 237, 255, 0.13), transparent 28%),
    var(--account-ink);
}

.account-dashboard-main {
  min-width: 0;
  gap: clamp(14px, 2vw, 22px);
}

.account-dashboard-main .account-command-bar {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 64px minmax(0, 1fr) minmax(280px, auto);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  overflow: hidden;
  border-color: var(--account-ink);
  border-radius: 22px 22px 6px 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(45, 154, 239, 0.22), transparent 22%),
    linear-gradient(125deg, #071b36 0%, var(--account-ink) 58%, #071b36 100%);
  color: var(--account-paper);
  box-shadow: 0 18px 48px rgba(16, 26, 55, 0.17);
}

.account-dashboard-main .account-command-bar::after {
  position: absolute;
  right: -54px;
  bottom: -118px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(247, 251, 255, 0.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.account-dashboard-main .account-command-bar > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.account-dashboard-main .account-command-bar .account-avatar {
  width: 64px;
  height: 64px;
  border-color: rgba(247, 251, 255, 0.72);
  background: var(--account-mint);
  color: var(--account-ink);
  font-size: 32px;
}

.account-command-copy {
  display: grid;
  gap: 6px;
}

.account-command-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.account-command-meta span {
  padding: 5px 8px;
  border: 1px solid rgba(247, 251, 255, 0.24);
  border-radius: 999px;
  color: rgba(247, 251, 255, 0.78);
  font: 700 11px/1.1 "Courier New", monospace;
  letter-spacing: 0.05em;
}

.account-dashboard-main .account-command-bar h2 {
  min-width: 0;
  color: var(--account-paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.account-dashboard-main .account-command-bar h2 ~ p {
  max-width: 680px;
  margin: 0;
  color: rgba(247, 251, 255, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.account-command-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 8px 14px;
  align-items: center;
  justify-content: end;
}

.account-access-chip {
  display: inline-flex;
  grid-column: 1 / -1;
  min-height: 32px;
  gap: 8px;
  align-items: center;
  justify-self: end;
  padding: 7px 10px;
  border: 1px solid rgba(247, 251, 255, 0.24);
  border-radius: 999px;
  background: rgba(247, 251, 255, 0.08);
  color: var(--account-paper);
  font: 700 11px/1.15 "Courier New", monospace;
  letter-spacing: 0.04em;
}

.account-access-chip i,
.account-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f1b84a;
  box-shadow: 0 0 0 5px rgba(241, 184, 74, 0.14);
}

.account-access-chip.is-active i,
.account-live-dot {
  background: #84d5a4;
  box-shadow: 0 0 0 5px rgba(132, 213, 164, 0.14);
}

.account-live-dot.is-caution {
  background: #f1b84a;
  box-shadow: 0 0 0 5px rgba(241, 184, 74, 0.14);
}

.account-command-primary,
.account-command-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(247, 251, 255, 0.38);
  border-radius: 999px;
  color: var(--account-paper);
  font: 700 11px/1.1 "Courier New", monospace;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.account-command-primary {
  gap: 13px;
  padding: 0 15px;
  border-color: var(--account-gold);
  background: var(--account-gold);
  color: var(--account-ink);
  cursor: pointer;
}

.account-command-link {
  padding: 0 12px;
  background: transparent;
  cursor: pointer;
}

.account-command-primary:hover,
.account-command-link:hover:not(:disabled) {
  border-color: var(--account-paper);
  background: var(--account-paper);
  color: var(--account-ink);
}

.account-command-link:disabled {
  cursor: wait;
  opacity: 0.56;
}

.account-command-primary:disabled {
  cursor: wait;
  opacity: 0.64;
}

.account-dashboard-main .account-trial-upgrade {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 22px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px 18px 5px 18px;
  background:
    radial-gradient(circle at 90% 8%, rgba(45, 154, 239, 0.23), transparent 34%),
    var(--account-ink);
}

.account-dashboard-main .account-trial-upgrade h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(21px, 2.2vw, 28px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.account-dashboard-main .account-trial-upgrade-copy > p:not(.account-kicker) {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
}

.account-dashboard-main .account-trial-meter {
  margin-top: 10px;
}

.account-dashboard-main .account-trial-upgrade-actions {
  align-items: flex-end;
  margin: 0;
}

.account-dashboard-main .account-trial-upgrade > .account-checkout-pending,
.account-dashboard-main .account-trial-upgrade > .account-membership-notice {
  grid-column: 1 / -1;
  margin: 0;
}

.account-mission-control {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(16, 26, 55, 0.55);
  border-radius: 26px 26px 7px 26px;
  background: var(--account-card);
  box-shadow: 0 24px 65px rgba(16, 26, 55, 0.1);
}

.account-mission-control::after {
  display: none;
}

.account-mission-header {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(22px, 3vw, 32px);
}

.account-mission-intro h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.account-mission-intro > p:last-child {
  max-width: 720px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.account-mission-status {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  color: rgba(16, 26, 55, 0.72);
  font: 700 11px/1.2 "Courier New", monospace;
  letter-spacing: 0.035em;
}

.account-mission-role-badge {
  min-height: 32px;
  padding: 9px 12px 0;
  border-color: var(--account-ink);
  background: var(--account-ink);
  color: var(--account-paper);
  font-size: 11px;
}

.account-cockpit-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(16, 26, 55, 0.3);
  border-bottom: 1px solid rgba(16, 26, 55, 0.3);
  background: rgba(247, 251, 255, 0.55);
}

.account-cockpit-tabs button {
  display: grid;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-content: center;
  padding: 13px 18px;
  border: 0;
  border-left: 1px solid rgba(16, 26, 55, 0.22);
  background: transparent;
  color: var(--account-ink);
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.account-cockpit-tabs button:first-child {
  border-left: 0;
}

.account-cockpit-tabs button > span {
  grid-row: 1 / 3;
  color: var(--mission-accent);
  font: 700 12px/1 "Courier New", monospace;
}

.account-cockpit-tabs button strong {
  font-size: 16px;
  line-height: 1.15;
}

.account-cockpit-tabs button small {
  color: rgba(16, 26, 55, 0.68);
  font-size: 11px;
  line-height: 1.25;
}

.account-cockpit-tabs button:hover,
.account-cockpit-tabs button[aria-selected="true"] {
  background: var(--account-ink);
  color: var(--account-paper);
}

.account-cockpit-tabs button:hover small,
.account-cockpit-tabs button[aria-selected="true"] small {
  color: rgba(247, 251, 255, 0.75);
}

.account-cockpit-tabs button[aria-selected="true"] > span {
  color: var(--account-gold);
}

.account-cockpit-panel[hidden] {
  display: none;
}

.account-cockpit-panel {
  min-width: 0;
  padding: clamp(18px, 3vw, 30px);
}

.account-cockpit-panel:focus {
  outline: none;
}

.account-mission-summary,
.account-mission-summary--parent {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.25fr) 150px minmax(250px, 0.72fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.account-focus-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 22px 22px 6px 22px;
  background:
    radial-gradient(circle at 92% 12%, rgba(45, 154, 239, 0.26), transparent 27%),
    var(--account-ink);
  color: var(--account-paper);
}

.account-focus-card .account-kicker {
  color: var(--account-gold);
}

.account-focus-card.account-mission-next h3 {
  color: var(--account-paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(25px, 3vw, 38px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.account-focus-card.account-mission-next > p:not(.account-kicker) {
  max-width: 620px;
  margin-top: 10px;
  color: rgba(247, 251, 255, 0.76);
  font-size: 14px;
}

.account-focus-card.account-mission-next > a,
.account-role-primary {
  display: inline-flex;
  width: fit-content;
  min-height: 46px;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid var(--account-gold);
  border-radius: 999px;
  background: var(--account-gold);
  color: var(--account-ink);
  font: 700 11px/1 "Courier New", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.account-focus-card.account-mission-next > a:hover,
.account-role-primary:hover {
  border-color: var(--account-paper);
  background: var(--account-paper);
  color: var(--account-ink);
}

.account-focus-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.account-focus-meta span {
  padding: 6px 9px;
  border: 1px solid rgba(247, 251, 255, 0.22);
  border-radius: 999px;
  color: rgba(247, 251, 255, 0.7);
  font-size: 11px;
  line-height: 1.2;
}

.account-focus-card .account-data-note {
  display: block;
  max-width: 580px;
  margin-top: 13px;
  color: rgba(247, 251, 255, 0.7);
  font-size: 11px;
  line-height: 1.45;
}

.account-mission-orbit.progress-orbit-meter,
.account-mission-orbit-state {
  align-self: center;
  justify-self: center;
}

.account-mission-orbit.progress-orbit-meter {
  width: 144px;
  height: 144px;
  box-shadow: 0 12px 34px rgba(16, 26, 55, 0.1);
}

.account-mission-orbit.progress-orbit-meter::before {
  width: 114px;
  height: 114px;
}

.account-mission-orbit-state {
  width: 144px;
  padding: 18px;
  background: rgba(247, 251, 255, 0.72);
  font-size: 11px;
}

.account-mission-metrics.progress-stats {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-mission-metrics.progress-stats > div,
.account-mission-metrics.progress-stats > div:first-child {
  display: flex;
  min-width: 0;
  min-height: 98px;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(16, 26, 55, 0.26);
  border-radius: 15px 15px 4px 15px;
  background: rgba(247, 251, 255, 0.72);
}

.account-mission-metrics.progress-stats dt {
  font-size: 11px;
  line-height: 1.25;
}

.account-mission-metrics.progress-stats dd {
  overflow-wrap: anywhere;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
}

.account-mission-role-panel {
  grid-template-columns: auto minmax(0, 1fr);
  padding: clamp(24px, 4vw, 40px);
  border: 0;
  border-radius: 22px 22px 6px 22px;
  background:
    linear-gradient(120deg, rgba(219, 237, 255, 0.92), rgba(255, 255, 255, 0.88));
}

.account-mission-role-panel h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.account-mission-role-panel p:last-child {
  max-width: 650px;
  font-size: 14px;
}

.account-mission-intro .account-kicker,
.account-pathway-heading .account-kicker,
.account-topic-snapshot .account-kicker,
.account-mission-role-panel .account-kicker {
  color: var(--mission-accent);
}

.account-role-primary {
  border-color: var(--account-ink);
  background: var(--account-ink);
  color: var(--account-paper);
}

.account-mission-notice {
  margin: 0 clamp(18px, 3vw, 30px) clamp(18px, 3vw, 30px);
  border-radius: 0 12px 12px 0;
  font-size: 13px;
}

.account-pathway-launcher {
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(16, 26, 55, 0.28);
  border-radius: 22px 22px 6px 22px;
  background: rgba(247, 251, 255, 0.56);
}

.account-pathway-heading,
.account-topic-snapshot-heading {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
}

.account-pathway-heading h3,
.account-topic-snapshot-heading h3 {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.account-pathway-heading > a,
.account-topic-snapshot-heading > a {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid currentColor;
  color: var(--account-ink);
  font: 700 11px/1.1 "Courier New", monospace;
  letter-spacing: 0.045em;
}

.account-pathway-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-top: 22px;
}

.account-pathway-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 7px;
  border: 1px solid rgba(16, 26, 55, 0.32);
  border-radius: 999px;
  background: var(--account-card);
  color: var(--account-ink);
  cursor: pointer;
  font: 700 11px/1.1 "Courier New", monospace;
  letter-spacing: 0.035em;
}

.account-pathway-tabs button:hover,
.account-pathway-tabs button[aria-selected="true"] {
  border-color: var(--account-ink);
  background: var(--account-ink);
  color: var(--account-paper);
}

.account-pathway-panel {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-top: 12px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 18px 18px 5px 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(45, 154, 239, 0.25), transparent 25%),
    var(--account-ink);
  color: var(--account-paper);
}

.account-pathway-panel small {
  color: var(--account-gold);
  font: 700 11px/1.2 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-pathway-panel h4 {
  margin: 10px 0 0;
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.account-pathway-panel p {
  max-width: 690px;
  margin: 12px 0 0;
  color: rgba(247, 251, 255, 0.75);
  font-size: 14px;
  line-height: 1.5;
}

.account-pathway-panel > a {
  display: inline-flex;
  min-height: 46px;
  gap: 16px;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--account-gold);
  color: var(--account-ink);
  font: 700 11px/1 "Courier New", monospace;
  white-space: nowrap;
}

.account-tool-launcher {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.account-tool-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 188px;
  flex-direction: column;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 55, 0.3);
  border-radius: 17px 17px 5px 17px;
  background: var(--account-card);
  color: var(--account-ink);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.account-tool-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--tool-accent, var(--account-mint));
  content: "";
}

.account-tool-card--mint { --tool-accent: #80b79c; }
.account-tool-card--gold { --tool-accent: var(--account-gold); }
.account-tool-card--coral { --tool-accent: var(--account-red); }
.account-tool-card--blue { --tool-accent: #5d7fa8; }
.account-tool-card--ink { --tool-accent: var(--account-ink); }

.account-tool-card > span {
  color: rgba(16, 26, 55, 0.76);
  font: 700 11px/1 "Courier New", monospace;
}

.account-tool-card strong {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.15;
}

.account-tool-card p {
  margin: 9px 0 0;
  color: rgba(16, 26, 55, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.account-tool-card b {
  display: grid;
  width: 34px;
  height: 34px;
  margin-top: auto;
  place-items: center;
  align-self: flex-end;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
}

.account-tool-card:hover,
.account-tool-card:focus-visible {
  border-color: var(--account-ink);
  box-shadow: 0 16px 30px rgba(16, 26, 55, 0.11);
  transform: translateY(-3px);
}

.account-activity-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: 14px;
  align-items: start;
}

.account-topic-snapshot {
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(16, 26, 55, 0.28);
  border-radius: 20px 20px 6px 20px;
  background: rgba(247, 251, 255, 0.66);
}

.account-topic-snapshot ul {
  display: grid;
  gap: 7px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.account-topic-snapshot li > a {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 0.55fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid rgba(16, 26, 55, 0.2);
  border-radius: 12px;
  background: var(--account-card);
}

.account-topic-snapshot li > a:hover {
  border-color: var(--account-ink);
}

.account-topic-snapshot li strong,
.account-topic-snapshot li small {
  display: block;
}

.account-topic-snapshot li strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.account-topic-snapshot li small {
  margin-top: 4px;
  color: rgba(16, 26, 55, 0.76);
  font-size: 11px;
  line-height: 1.25;
}

.account-topic-snapshot li b {
  font-size: 12px;
}

.account-topic-meter {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 26, 55, 0.12);
}

.account-topic-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mission-accent);
}

.account-topic-empty {
  margin: 20px 0 0;
  padding: 20px;
  border: 1px dashed rgba(16, 26, 55, 0.4);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}

.account-cockpit-panel .account-mission-actions.account-destination-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.account-cockpit-panel .account-mission-action.account-destination,
.account-cockpit-panel .account-mission-action.account-destination:nth-child(odd),
.account-cockpit-panel .account-mission-action.account-destination:nth-child(n + 3),
.account-cockpit-panel .account-mission-action.account-destination + .account-mission-action.account-destination {
  display: grid;
  min-width: 0;
  min-height: 158px;
  grid-template-columns: 24px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(16, 26, 55, 0.28);
  border-radius: 16px 16px 5px 16px;
  background: var(--account-card);
  color: var(--account-ink);
}

.account-cockpit-panel .account-mission-action.account-destination:hover,
.account-cockpit-panel .account-mission-action.account-destination:focus-visible {
  border-color: var(--account-ink);
  background: var(--account-ink);
  color: var(--account-paper);
}

.account-cockpit-panel .account-mission-action.account-destination > span,
.account-cockpit-panel .account-mission-action.account-destination small {
  font-size: 11px;
  line-height: 1.15;
}

.account-cockpit-panel .account-mission-action.account-destination strong {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.account-cockpit-panel .account-mission-action.account-destination p {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.4;
}

.account-cockpit-panel .account-mission-action.account-destination > b {
  width: 30px;
  height: 30px;
  font-size: 16px;
}

.account-dashboard-main .account-assignments,
.account-dashboard-main .account-children {
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(16, 26, 55, 0.3);
  border-radius: 20px 20px 6px 20px;
  background: var(--account-card);
}

.account-dashboard-main .account-assignments h3,
.account-dashboard-main .account-children h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 2.8vw, 32px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.account-dashboard-main .account-assignment-list,
.account-dashboard-main .account-children-list {
  margin-top: 16px;
}

.account-dashboard-main .account-assignment-list li,
.account-dashboard-main .account-children-list li {
  border-radius: 12px;
}

.account-dashboard-main .account-assignment-list li > div,
.account-dashboard-main .account-children-list li > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-assignment-expand {
  display: inline-flex;
  min-height: 44px;
  gap: 13px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid var(--account-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--account-ink);
  cursor: pointer;
  font: 700 11px/1.1 "Courier New", monospace;
  letter-spacing: 0.04em;
}

.account-assignment-expand:hover {
  background: var(--account-ink);
  color: var(--account-paper);
}

.account-cockpit-tabs button:focus-visible,
.account-pathway-tabs button:focus-visible,
.account-command-primary:focus-visible,
.account-command-link:focus-visible,
.account-pathway-panel > a:focus-visible,
.account-tool-card:focus-visible,
.account-topic-snapshot li > a:focus-visible,
.account-role-primary:focus-visible,
.account-assignment-expand:focus-visible {
  outline: 2px solid var(--account-paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--account-ink);
}

.account-command-bar .account-command-primary:focus-visible {
  outline: 3px solid var(--account-ink);
  outline-offset: -6px;
  box-shadow: none;
}

.account-command-bar .account-command-link:focus-visible {
  outline: 3px solid var(--account-paper);
  outline-offset: -5px;
  box-shadow: none;
}

@media (max-width: 1080px) {
  .account-dashboard-main .account-command-bar {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .account-command-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .account-access-chip {
    justify-self: start;
  }

  .account-mission-summary,
  .account-mission-summary--parent {
    grid-template-columns: minmax(0, 1fr) 144px;
  }

  .account-mission-metrics.progress-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .account-mission-metrics.progress-stats > div,
  .account-mission-metrics.progress-stats > div:first-child {
    min-height: 86px;
  }

  .account-tool-launcher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .account-activity-layout {
    grid-template-columns: 1fr;
  }

  .account-dashboard-main .account-trial-upgrade {
    grid-template-columns: 1fr;
  }

  .account-dashboard-main .account-trial-upgrade-actions {
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .account-page:not(.account-subpage) {
    padding-top: 20px;
  }

  .account-page:not(.account-subpage) > .account-back {
    margin-bottom: 17px;
  }

  .account-section-nav {
    margin-bottom: 14px;
  }

  .account-dashboard-main .account-command-bar {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }

  .account-dashboard-main .account-command-bar .account-avatar {
    width: 50px;
    height: 50px;
    font-size: 26px;
  }

  .account-command-actions {
    grid-column: 1 / -1;
  }

  .account-command-meta span:nth-child(2) {
    display: none;
  }

  .account-mission-header {
    display: grid;
  }

  .account-mission-status {
    justify-content: flex-start;
  }

  .account-cockpit-tabs button {
    min-height: 58px;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .account-cockpit-tabs button small {
    display: none;
  }

  .account-cockpit-panel {
    padding: 16px;
  }

  .account-mission-summary,
  .account-mission-summary--parent {
    grid-template-columns: 1fr;
  }

  .account-mission-role-panel {
    grid-template-columns: 1fr;
  }

  .account-mission-role-mark {
    width: 64px;
  }

  .account-mission-orbit.progress-orbit-meter,
  .account-mission-orbit-state {
    justify-self: start;
  }

  .account-mission-metrics.progress-stats {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-pathway-heading,
  .account-topic-snapshot-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-pathway-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-pathway-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .account-pathway-panel > a {
    width: fit-content;
  }

  .account-tool-launcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-cockpit-panel .account-mission-actions.account-destination-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .account-command-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .account-access-chip,
  .account-command-primary {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .account-command-link {
    width: 100%;
  }

  .account-cockpit-tabs button {
    display: flex;
    min-height: 54px;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
  }

  .account-cockpit-tabs button > span {
    grid-row: auto;
    font-size: 10px;
  }

  .account-cockpit-tabs button strong {
    font-size: 13px;
  }

  .account-pathway-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-tool-launcher {
    grid-template-columns: 1fr;
  }

  .account-tool-card {
    min-height: 158px;
  }

  .account-topic-snapshot li > a {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .account-topic-meter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .account-dashboard-main .account-assignment-list li {
    grid-template-columns: 1fr;
  }

  .account-dashboard-main .account-assignment-list li > .account-text-button {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-cockpit-tabs button,
  .account-tool-card,
  .account-command-primary,
  .account-command-link {
    transition: none;
  }

  .account-tool-card:hover,
  .account-tool-card:focus-visible {
    transform: none;
  }
}