/*
 * THE SCHOOL ADMINISTRATOR'S PORTAL, DRESSED.
 *
 * The design is the one Xplore supplied in `xplore_school_admin_portal_v1`:
 * a dark rail down the left with the school's name on it, a white working
 * area, one orange for the thing you are meant to press. It is deliberately
 * NOT the `.adp-*` administrator console — a head teacher and an installer
 * are different people looking for different things, and the rail that
 * always says whose school this is only earns its width here.
 *
 * Everything is under `.sap`, and the portal keeps its own light surfaces
 * in either IDE theme: it is a screen an adult reads in a staffroom, and
 * inheriting a dark editor theme would produce a page neither design
 * accounts for.
 */

.sap, .sap-print-host, .sap-hosted {
  --sap-orange:      #F15F25;
  --sap-orange-dark: #C94312;
  --sap-orange-soft: #FFF0E9;
  --sap-orange-pale: #FFF8F4;
  --sap-black:       #171614;
  --sap-charcoal:    #373431;
  --sap-muted:       #706B66;
  --sap-line:        #E6DFDA;
  --sap-surface:     #FFFFFF;
  --sap-bg:          #F7F5F3;
  --sap-success:     #15803D;
  --sap-success-soft:#EAF7EE;
  --sap-danger:      #B42318;
  --sap-danger-soft: #FFF0EE;
  --sap-warning:     #9A6700;
  --sap-warning-soft:#FFF6DC;

  --sap-rail:      248px;
  --sap-radius-lg: 18px;
  --sap-radius-md: 12px;
  --sap-shadow:    0 10px 30px rgb(51 38 30 / 8%);
}

.sap {
  position: fixed;
  inset: 0;
  /* Above the IDE's own topbar, which is 1000 and sticky. */
  z-index: 1200;
  display: grid;
  grid-template-columns: var(--sap-rail) 1fr;
  /* One row the height of the overlay, so the working area scrolls inside
     itself. Without it the row grows to its content, the body behind is
     already locked, and everything below the fold is unreachable. */
  grid-template-rows: minmax(0, 1fr);
  background: var(--sap-bg);
  color: var(--sap-black);
  font-size: 14px;
  line-height: 1.5;
}

.sap[hidden] { display: none; }
.sap, .sap * { box-sizing: border-box; }
.sap button, .sap input, .sap select, .sap textarea { font: inherit; }
.sap button { cursor: pointer; }
.sap :focus-visible {
  outline: 3px solid rgb(241 95 37 / 28%);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- the rail */

.sap-rail {
  min-height: 0;
  background: var(--sap-black);
  color: #fff;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.sap-brand {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--sap-radius-md);
  background: #fff;
}
.sap-brand img { width: 100%; max-width: 178px; height: auto; display: block; }
.sap-rail-label {
  margin: 24px 12px 8px;
  color: #AAA39E;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sap-school { margin: 0 12px 20px; font-weight: 600; }
.sap-nav { display: grid; gap: 5px; }
.sap-nav button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #DDD7D2;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  transition: background .16s ease, color .16s ease;
}
.sap-nav button:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.sap-nav button[aria-current="page"] { background: var(--sap-orange); color: #fff; }
.sap-nav svg { width: 18px; height: 18px; flex: 0 0 auto; }

.sap-rail-foot {
  margin-top: auto;
  border-top: 1px solid rgb(255 255 255 / 12%);
  padding: 16px 8px 0;
  display: grid;
  gap: 4px;
}
.sap-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sap-mini strong, .sap-mini small { display: block; }
.sap-mini small { color: #AAA39E; }
.sap-rail-foot > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #DDD7D2;
  padding: 9px 12px;
  text-align: left;
}
.sap-rail-foot > button:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.sap-rail-foot svg { width: 18px; height: 18px; }

.sap-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sap-orange);
  color: #fff;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ----------------------------------------------------------- the working area */

.sap-main { min-width: 0; min-height: 0; overflow: auto; }

.sap-top {
  min-height: 76px;
  background: var(--sap-surface);
  border-bottom: 1px solid var(--sap-line);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.sap-top-title { margin-right: auto; }
.sap-top-title h1 { margin: 0; font-size: 20px; line-height: 1.25; }
.sap-top-title p { margin: 3px 0 0; color: var(--sap-muted); font-size: 12px; }
.sap-who {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius-md);
  padding: 6px 12px 6px 7px;
  background: #fff;
  color: var(--sap-black);
}
.sap-who .sap-avatar { width: 31px; height: 31px; border-radius: 8px; }
.sap-who small { display: block; color: var(--sap-muted); font-size: 11px; }
.sap-who strong { display: block; font-size: 13px; }

.sap-content { padding: 28px 32px 48px; max-width: 1480px; margin: 0 auto; }

.sap-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.sap-heading h2 { margin: 0 0 5px; font-size: 24px; }
.sap-heading p { margin: 0; color: var(--sap-muted); }
.sap-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- buttons */

.sap-btn {
  border: 1px solid var(--sap-line);
  background: #fff;
  color: var(--sap-black);
  min-height: 42px;
  border-radius: 10px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 650;
  text-decoration: none;
}
.sap-btn:hover { border-color: #CFC5BE; background: #FCFBFA; }
.sap-btn-primary {
  color: #fff;
  background: var(--sap-orange);
  border-color: var(--sap-orange);
}
.sap-btn-primary:hover {
  background: var(--sap-orange-dark);
  border-color: var(--sap-orange-dark);
}
.sap-btn-quiet { border-color: transparent; background: transparent; color: var(--sap-muted); }
.sap-btn-danger { color: var(--sap-danger); border-color: #F3C4BE; background: var(--sap-danger-soft); }
.sap-btn-small { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.sap-btn:disabled { opacity: .48; cursor: not-allowed; }
.sap-btn svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------- metrics */

.sap-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.sap-metric {
  background: #fff;
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius-lg);
  padding: 20px;
  min-height: 145px;
  display: flex;
  flex-direction: column;
}
.sap-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sap-metric-label { color: var(--sap-muted); font-weight: 600; }
.sap-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--sap-radius-md);
  background: var(--sap-orange-soft);
  color: var(--sap-orange-dark);
  display: grid;
  place-items: center;
}
.sap-metric-icon svg { width: 19px; height: 19px; }
.sap-metric-value { margin-top: auto; font-size: 30px; line-height: 1; font-weight: 750; }
.sap-metric-value.sap-metric-date { font-size: 22px; }
.sap-metric-note { color: var(--sap-muted); font-size: 12px; margin-top: 8px; }

/* ---------------------------------------------------------------- panels */

.sap-two { display: grid; grid-template-columns: 1.35fr .8fr; gap: 20px; }
.sap-panel {
  background: #fff;
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius-lg);
  overflow: hidden;
}
.sap-panel + .sap-panel, .sap-two + .sap-panel { margin-top: 20px; }
.sap-panel-head {
  min-height: 66px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--sap-line);
}
.sap-panel-head h3 { margin: 0; font-size: 16px; }
.sap-panel-head p { margin: 3px 0 0; color: var(--sap-muted); font-size: 12px; }
.sap-panel-body { padding: 20px; }

.sap-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sap-quick > * {
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius-md);
  background: #fff;
  color: var(--sap-black);
  text-align: left;
  padding: 17px;
  min-height: 136px;
}
button.sap-quick-action:hover {
  border-color: var(--sap-orange);
  box-shadow: 0 0 0 3px var(--sap-orange-soft);
}
.sap-quick-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--sap-orange-soft);
  color: var(--sap-orange-dark);
  font-weight: 800;
  margin-bottom: 16px;
}
.sap-quick-mark svg { width: 18px; height: 18px; }
.sap-quick strong { display: block; margin-bottom: 4px; }
.sap-quick span { color: var(--sap-muted); font-size: 12px; }

/* ------------------------------------------------------------ seat usage */

.sap-seats { padding: 6px 0 0; }
.sap-seat-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.sap-seat-row strong { font-size: 26px; }
.sap-track { height: 10px; background: #EEE9E5; border-radius: 999px; overflow: hidden; }
.sap-fill { height: 100%; background: var(--sap-orange); border-radius: inherit; }
.sap-fill.sap-full { background: var(--sap-danger); }
.sap-seat-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--sap-muted);
  font-size: 12px;
}
.sap-note {
  margin-top: 18px;
  border-radius: var(--sap-radius-md);
  padding: 14px;
  background: var(--sap-orange-pale);
  border: 1px solid #FFD8C7;
  color: #784225;
  font-size: 12px;
}
.sap-note h4 { margin: 0 0 4px; font-size: 13px; }
.sap-note p { margin: 0; }
.sap-note p + p { margin-top: 6px; }

/* ------------------------------------------------------------ recent list */

.sap-recent { display: grid; }
.sap-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--sap-line);
}
.sap-recent-item:last-child { border-bottom: 0; }
.sap-recent-item:first-child { padding-top: 0; }
.sap-initials {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #F1EFED;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #554F4B;
  flex: 0 0 auto;
}
.sap-recent-copy { flex: 1; min-width: 0; }
.sap-recent-copy strong, .sap-recent-copy span { display: block; }
.sap-recent-copy span { color: var(--sap-muted); font-size: 12px; }

/* --------------------------------------------------------------- tables */

.sap-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sap-line);
  flex-wrap: wrap;
}
.sap-search { position: relative; flex: 1 1 260px; }
.sap-search input { padding-left: 38px; }
.sap-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--sap-muted);
  pointer-events: none;
}
.sap-field, .sap-select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #D8D0CA;
  border-radius: 10px;
  background: #fff;
  color: var(--sap-black);
  padding: 9px 12px;
}
.sap-scroll { overflow-x: auto; }
.sap table, .sap-hosted table { width: 100%; border-collapse: collapse; }
.sap th, .sap td, .sap-hosted th, .sap-hosted td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--sap-line);
  vertical-align: middle;
}
.sap th, .sap-hosted th {
  color: var(--sap-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 750;
  background: #FCFBFA;
}
.sap tbody tr:hover, .sap-hosted tbody tr:hover { background: #FFFAF7; }
.sap tbody tr:last-child td, .sap-hosted tbody tr:last-child td { border-bottom: 0; }
.sap-learner-cell { display: flex; align-items: center; gap: 11px; min-width: 190px; }
.sap-learner-cell strong, .sap-learner-cell small { display: block; }
.sap-learner-cell small { color: var(--sap-muted); }
.sap-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  font-weight: 700;
}
.sap-pin { display: flex; align-items: center; gap: 8px; }
.sap-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  background: var(--sap-success-soft);
  color: var(--sap-success);
}
.sap-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.sap-pill-quiet { background: #F0EEEC; color: #6F6863; }
.sap-pill-warn { background: var(--sap-warning-soft); color: var(--sap-warning); }
/* Not a flex cell: a `display: flex` <td> stops being a table cell, and
   its border-bottom then sits a few pixels above its neighbours'. */
.sap-cell-actions { text-align: right; white-space: nowrap; }
.sap-cell-actions .sap-btn + .sap-btn { margin-left: 6px; }
.sap-empty { text-align: center; padding: 48px 20px; color: var(--sap-muted); }
.sap-muted { color: var(--sap-muted); }

/* --------------------------------------------------------- subscription */

.sap-plan-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.sap-plan {
  color: #fff;
  background: linear-gradient(135deg, #171614 0%, #302D2A 100%);
  border-radius: var(--sap-radius-lg);
  padding: 26px;
  position: relative;
  overflow: hidden;
  min-height: 252px;
}
.sap-plan::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgb(241 95 37 / 18%);
  right: -70px;
  top: -60px;
}
.sap-plan-badge {
  display: inline-flex;
  color: #fff;
  background: var(--sap-orange);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sap-plan h3 { font-size: 26px; margin: 20px 0 4px; }
.sap-plan > p { color: #C9C2BD; max-width: 520px; margin: 0; }
.sap-plan-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
  position: relative;
  z-index: 1;
}
.sap-plan-meta div { border-top: 1px solid rgb(255 255 255 / 16%); padding-top: 12px; }
.sap-plan-meta span, .sap-plan-meta strong { display: block; }
.sap-plan-meta span {
  color: #AAA39E;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sap-plan-meta strong { margin-top: 3px; }

.sap-features { display: grid; gap: 12px; }
.sap-feature { display: flex; align-items: flex-start; gap: 11px; }
.sap-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sap-success-soft);
  color: var(--sap-success);
  display: grid;
  place-items: center;
  font-weight: 800;
  flex: 0 0 auto;
}
.sap-check-no { background: #F0EEEC; color: #6F6863; }
.sap-feature strong, .sap-feature span { display: block; }
.sap-feature span { color: var(--sap-muted); font-size: 12px; }

/* -------------------------------------------------------------- dialogs */

.sap-dialog {
  width: min(620px, calc(100% - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 0;
  border-radius: var(--sap-radius-lg);
  padding: 0;
  box-shadow: 0 28px 80px rgb(32 23 18 / 28%);
  color: #171614;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.sap-dialog::backdrop { background: rgb(25 18 14 / 54%); }
.sap-dialog-wide { width: min(860px, calc(100% - 28px)); }
.sap-modal-head {
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--sap-line);
}
.sap-modal-head h2 { margin: 0; font-size: 20px; }
.sap-modal-head p { margin: 4px 0 0; color: var(--sap-muted); font-size: 12px; }
.sap-modal-body { padding: 22px; }
/* Head and foot stay put: a hundred login cards must not put the Print
   button a scroll away from the person who came here to press it. */
.sap-modal-head, .sap-modal-foot {
  position: sticky;
  background: #fff;
  z-index: 1;
}
.sap-modal-head { top: 0; }
.sap-modal-foot {
  bottom: 0;
  padding: 16px 22px;
  border-top: 1px solid var(--sap-line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.sap-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sap-group { display: grid; gap: 6px; }
.sap-group.sap-wide { grid-column: 1 / -1; }
.sap-group > label { font-weight: 650; }
.sap-hint { color: var(--sap-muted); font-size: 11px; }
.sap-code-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.sap-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sap-choice {
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius-md);
  padding: 13px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.sap-choice:has(input:checked) { border-color: var(--sap-orange); background: var(--sap-orange-pale); }
/* The IDE's own stylesheet stretches a bare input to the width of its
   box, which turns a radio into a saucer. */
.sap-choice input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 3px 0 0;
  flex: 0 0 auto;
  accent-color: var(--sap-orange);
}
.sap-choice strong, .sap-choice em { display: block; font-style: normal; }
.sap-choice em { color: var(--sap-muted); font-size: 11px; }
/* ------------------------------------------------- choosing the levels */

.sap-choices-four { grid-template-columns: repeat(4, 1fr); }

/*
 * The level picker: every campaign this build publishes, with its levels
 * under it. Scrolls in its own box — sixty checkboxes down the page would
 * push Create off the bottom of the panel.
 */
.sap-levels {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius-md);
  background: #fff;
}
.sap-level-set + .sap-level-set { border-top: 1px solid var(--sap-line); }
.sap-level-set > header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: #FCFBFA;
  border-bottom: 1px solid var(--sap-line);
}
.sap-level {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
}
.sap-level:hover { background: var(--sap-orange-pale); }
.sap-level input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--sap-orange);
}
.sap-level-no {
  width: 22px;
  flex: 0 0 auto;
  color: var(--sap-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sap-bad { color: var(--sap-danger); font-size: 12px; min-height: 18px; }
.sap-good { color: var(--sap-success); font-size: 12px; }
.sap-said {
  margin: 0 0 16px;
  border-radius: var(--sap-radius-md);
  padding: 12px 14px;
  background: var(--sap-success-soft);
  color: var(--sap-success);
}
.sap-wrong {
  margin: 0 0 16px;
  border-radius: var(--sap-radius-md);
  padding: 12px 14px;
  background: var(--sap-danger-soft);
  color: var(--sap-danger);
}

/* --------------------------------------------------------------- import */

.sap-steps { display: flex; gap: 16px; margin-bottom: 20px; }
.sap-step { display: flex; align-items: center; gap: 7px; color: var(--sap-muted); font-size: 12px; }
.sap-step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #EEE9E5;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.sap-step.sap-now { color: var(--sap-orange-dark); font-weight: 700; }
.sap-step.sap-now .sap-step-number { background: var(--sap-orange); color: #fff; }
.sap-drop {
  border: 2px dashed #D6CBC4;
  border-radius: 14px;
  padding: 30px 20px;
  text-align: center;
  background: #FCFBFA;
}
.sap-drop strong, .sap-drop span { display: block; }
.sap-drop span { color: var(--sap-muted); margin: 5px 0 15px; }
.sap-tally { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sap-chip { border-radius: 999px; padding: 5px 10px; background: #F0EEEC; font-size: 12px; font-weight: 700; }
.sap-chip-good { background: var(--sap-success-soft); color: var(--sap-success); }
.sap-chip-warn { background: var(--sap-warning-soft); color: var(--sap-warning); }
.sap-preview {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius-md);
}
.sap-preview th, .sap-preview td { padding: 9px 12px; font-size: 13px; }
.sap-dialog textarea.sap-field { min-height: 150px; resize: vertical; font-family: inherit; }

/* ---------------------------------------------------------- login cards */

.sap-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sap-card {
  border: 1px dashed #BDB2AA;
  border-radius: var(--sap-radius-md);
  padding: 15px;
  background: #fff;
  break-inside: avoid;
}
.sap-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--sap-line);
  padding-bottom: 9px;
  margin-bottom: 9px;
}
.sap-card-head img { width: 104px; height: auto; }
.sap-card-head strong { font-size: 12px; color: var(--sap-muted); }
.sap-card h3 { margin: 0 0 5px; font-size: 15px; }
.sap-card-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; }
.sap-card-line span { color: var(--sap-muted); }
.sap-card-line code { color: var(--sap-black); font-weight: 750; letter-spacing: .08em; }

/* --------------------------------------------------------------- sign in */

/* One column, not rail-and-main: a card in the grid lands in the rail's
   248px and reads as a broken page. */
.sap.sap-signin-host { display: block; overflow: auto; }
.sap-signin {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
  background: var(--sap-bg);
}
.sap-signin-card {
  width: min(430px, 100%);
  padding: 28px;
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius-lg);
  background: #fff;
  box-shadow: var(--sap-shadow);
}
.sap-signin-card h1 { margin: 0 0 6px; font-size: 22px; }
.sap-signin-card p { margin: 0 0 14px; color: var(--sap-muted); }
.sap-signin-card .sap-group { margin-bottom: 18px; }
.sap-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------------------------------------------------------------- toast */

.sap-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1300;
  background: var(--sap-black);
  color: #fff;
  border-radius: var(--sap-radius-md);
  padding: 12px 16px;
  box-shadow: var(--sap-shadow);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.sap-toast.sap-showing { transform: translateY(0); opacity: 1; }

/* ------------------------------------------------------------ narrower */

@media (max-width: 1080px) {
  .sap-metrics { grid-template-columns: repeat(2, 1fr); }
  .sap-choices-four { grid-template-columns: repeat(2, 1fr); }
  .sap-two, .sap-plan-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sap { grid-template-columns: 1fr; }
  .sap-rail {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--sap-rail);
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 20;
  }
  .sap-rail.sap-open { transform: translateX(0); }
  .sap-top { padding: 0 16px; }
  .sap-content { padding: 22px 16px 40px; }
  .sap-heading { flex-direction: column; }
  .sap-quick { grid-template-columns: 1fr; }
  .sap-form, .sap-choices, .sap-cards { grid-template-columns: 1fr; }
  .sap-choices-four { grid-template-columns: 1fr; }
  .sap-group.sap-wide { grid-column: auto; }
}
@media (min-width: 821px) { .sap-menu { display: none; } }
@media (max-width: 520px) {
  .sap-metrics { grid-template-columns: 1fr; }
  .sap-plan-meta { grid-template-columns: 1fr; }
  .sap-who strong, .sap-who small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sap-nav button, .sap-rail, .sap-toast { transition: none; }
}

/*
 * PRINTING THE LOGIN CARDS.
 *
 * A school hands these out on paper, so the page that prints is the cards
 * and nothing else: no rail, no toolbar, no dialog chrome telling a child
 * to press Cancel.
 */
@media print {
  body.sap-printing > *:not(.sap-print-host) { display: none !important; }
  .sap-print-host { display: none; }
  body.sap-printing .sap-print-host { display: block; color: #171614; }
  body.sap-printing .sap-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---- learner levels: four bands, chosen once and filtered by --------- */
.sap-choices-four { grid-template-columns: 1fr 1fr; }
.sap-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.sap-chip-filter { border: 1px solid var(--sap-line); background: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.sap-chip-filter b { font-weight: 800; margin-left: 4px; }
.sap-chip-filter[aria-selected="true"] { background: var(--sap-charcoal); color: #fff; border-color: var(--sap-charcoal); }
.sap-pill-level { background: #EEF2FF; color: #3B4CCA; }
.sap-pill-level[data-level="upper-primary"] { background: #E6F7EE; color: #0A7A52; }
.sap-pill-level[data-level="junior-high"] { background: #FFF1E3; color: #B54A00; }
.sap-pill-level[data-level="senior-high"] { background: #F3E8FF; color: #6B21A8; }

/* Hosted inside the League: the page and nothing around it. */
.sap-hosted { color: var(--sap-black); font-size: 14px; line-height: 1.5; }
.sap-hosted, .sap-hosted * { box-sizing: border-box; }
.sap-hosted button, .sap-hosted input, .sap-hosted select, .sap-hosted textarea { font: inherit; }
.sap-hosted button { cursor: pointer; }
.sap-hosted .sap-content { padding: 0; max-width: none; margin: 0; }
.sap-hosted .sap-signin { min-height: 0; padding: 0; background: none; place-items: start; }
.sap-hosted .sap-heading h2 { font-size: 22px; }