:root {
  --sp-blue: #079ddd;
  --sp-blue-dark: #0879b8;
  --sp-green: #62bc45;
  --sp-navy: #123c5a;
  --sp-ink: #102b46;
  --sp-muted: #58708a;
  --sp-line: #d9e5ef;
  --sp-bg: #f3f7fb;
  --sp-focus: #ffbf19;
}

* { box-sizing: border-box; }
html { min-height: 100%; font-family: "Lexend Deca", Arial, sans-serif; color: var(--sp-ink); background: var(--sp-bg); }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 15% 15%, #dff5ff 0, transparent 34%), linear-gradient(145deg, #f8fbff, #edf6f0); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Parked off-screen by transform rather than a fixed -60px offset: at the
   larger text sizes the link is taller than 60px, so its bottom edge showed
   above the topbar and focusing it pushed the label out of view instead. */
.sp-skip { position: fixed; z-index: 1000; left: 16px; top: 0; transform: translateY(-130%); padding: 12px 16px; color: #fff; background: var(--sp-navy); border-radius: 0 0 8px 8px; }
.sp-skip:focus { transform: translateY(0); }

.sp-topbar { height: 66px; padding: 0 clamp(18px, 4vw, 54px); display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--sp-navy); box-shadow: 0 2px 8px rgba(17, 45, 69, .18); }
/* Brand is the real logo asset; intrinsic 496x80, held to the topbar height and
   never scaled by the accessibility text sizes (it is not type). */
.sp-brand { display: flex; align-items: center; text-decoration: none; }
.sp-brand img { width: auto; height: 34px; display: block; }
.sp-top-actions { display: flex; gap: 12px; align-items: center; }
.sp-change-class { color: #fff; font-size: 13px; font-weight: 700; }
.sp-lang { width: 44px; height: 36px; border: 1px solid rgba(255,255,255,.45); border-radius: 18px; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; }

.sp-main { min-height: calc(100vh - 112px); padding: clamp(28px, 6vw, 68px) 20px 28px; display: grid; place-items: start center; }
.sp-main--wide { padding-top: 38px; }
.sp-card { width: min(920px, 100%); padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(203, 219, 232, .9); border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--sp-blue), var(--sp-green)) 1; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 18px 54px rgba(18, 60, 90, .14); }
.sp-card--small { width: min(520px, 100%); text-align: center; }
.sp-mascot { width: 58px; height: 58px; margin: -6px auto 14px; display: grid; place-items: center; border-radius: 18px; color: #fff; font-size: 30px; background: linear-gradient(135deg, var(--sp-blue), var(--sp-green)); transform: rotate(-3deg); }
.sp-eyebrow { margin: 0 0 6px; color: var(--sp-blue-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
h1 { margin: 0; font-size: clamp(27px, 4vw, 40px); line-height: 1.15; }
.sp-lede { max-width: 600px; margin: 10px auto 26px; color: var(--sp-muted); line-height: 1.55; }
.sp-step-title { margin: 18px 0 14px; font-size: 21px; }
.sp-progress { width: 124px; margin: 2px auto 22px; display: flex; align-items: center; }
.sp-progress span:not(:empty) { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 2px solid var(--sp-line); border-radius: 50%; color: var(--sp-muted); font-size: 12px; font-weight: 800; background: #fff; }
.sp-progress span:empty { height: 2px; flex: 1; background: var(--sp-line); }
.sp-progress span.is-active:not(:empty) { border-color: var(--sp-blue); color: #fff; background: var(--sp-blue); }

.sp-form { display: grid; gap: 10px; text-align: left; }
.sp-form label { margin-top: 4px; font-size: 13px; font-weight: 700; }
.sp-form input { width: 100%; min-height: 52px; padding: 12px 15px; border: 2px solid var(--sp-line); border-radius: 11px; color: var(--sp-ink); background: #fff; }
.sp-form input:focus { border-color: var(--sp-blue); outline: 3px solid rgba(7,157,221,.18); }
.sp-code-input { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-size: 20px; font-weight: 800; }
.sp-primary, .sp-secondary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; font-weight: 800; cursor: pointer; }
.sp-primary { margin-top: 7px; border: 0; color: #fff; background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)); box-shadow: 0 6px 14px rgba(7,157,221,.25); }
.sp-primary:hover { filter: brightness(.96); }
.sp-primary:disabled { opacity: .58; cursor: wait; }
.sp-secondary { padding: 9px 14px; border: 1px solid var(--sp-line); color: var(--sp-blue-dark); background: #fff; }
.sp-text-link { display: inline-block; margin-top: 21px; color: var(--sp-blue-dark); font-size: 13px; font-weight: 700; }
.sp-error { min-height: 21px; margin: 2px 0 0; color: #a82323; font-size: 13px; font-weight: 700; text-align: center; }
.sp-footer { min-height: 46px; padding: 0 20px 16px; display: flex; justify-content: center; }
.sp-footer button { border: 0; color: var(--sp-muted); background: none; text-decoration: underline; cursor: pointer; }

.sp-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.sp-name { min-height: 72px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; border: 2px solid var(--sp-line); border-radius: 13px; color: var(--sp-ink); font-weight: 800; text-align: left; background: #fff; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.sp-name:hover { border-color: var(--sp-blue); transform: translateY(-2px); box-shadow: 0 7px 18px rgba(18,60,90,.1); }
.sp-name:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
/* Flex children default to min-width:auto, so a long name pushed past the
   card instead of wrapping inside it at the larger text sizes. */
.sp-name > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.sp-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--sp-blue), #33b8ae); }
.sp-back { padding: 6px 0; border: 0; color: var(--sp-blue-dark); font-weight: 700; background: none; cursor: pointer; }
.sp-selected-student { width: fit-content; margin: 10px auto 0; padding: 8px 14px; border-radius: 20px; font-weight: 800; background: #e7f6fc; }
.sp-secret-form { max-width: 650px; margin: 0 auto; }
.sp-instruction { margin: 0 0 12px; text-align: center; color: var(--sp-muted); }
.sp-slots { margin-bottom: 14px; display: flex; justify-content: center; gap: 10px; }
.sp-slot { width: 72px; height: 72px; display: grid; place-items: center; border: 2px dashed #aebfd0; border-radius: 13px; color: var(--sp-muted); font-size: 24px; background: #f7fafc; }
.sp-slot img { width: 58px; height: 58px; object-fit: contain; }
.sp-picture-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.sp-picture { min-height: 82px; padding: 7px; display: grid; place-items: center; border: 2px solid var(--sp-line); border-radius: 12px; background: #fff; cursor: pointer; }
.sp-picture img { width: 58px; height: 58px; object-fit: contain; }
.sp-picture.is-used { opacity: .35; }
.sp-legacy { display: grid; gap: 16px; }
.sp-legacy-group { padding: 13px; border: 1px solid var(--sp-line); border-radius: 12px; }
.sp-legacy-group h3 { margin: 0 0 10px; font-size: 14px; }
.sp-legacy-options { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-legacy-option { min-width: 68px; min-height: 68px; padding: 8px; display: grid; place-items: center; gap: 0; border: 2px solid var(--sp-line); border-radius: 11px; color: var(--sp-ink); font-size: 24px; font-weight: 800; line-height: 1; background: #fff; cursor: pointer; }
/* Match the printed card, which renders these at Font Awesome's fa-2x. */
.sp-legacy-option svg { width: 34px; height: 34px; display: block; }
.sp-legacy-option.is-selected { border-color: var(--sp-blue); box-shadow: inset 0 0 0 2px var(--sp-blue); background: #e8f7fd; }
.sp-empty { padding: 22px; border-radius: 12px; color: var(--sp-muted); text-align: center; background: #f6f9fc; }

button:focus-visible, a:focus-visible, input:focus-visible { outline: 4px solid var(--sp-focus); outline-offset: 3px; }
body.ya-high-contrast.ya-high-contrast .sp-card,
body.yeti-high-contrast.yeti-high-contrast .sp-card { border: 3px solid currentColor; box-shadow: none; }
body.ya-high-contrast.ya-high-contrast .sp-name,
body.ya-high-contrast.ya-high-contrast .sp-picture,
body.ya-high-contrast.ya-high-contrast .sp-legacy-option { border-color: currentColor; }


/* ── Text size (accessibility panel: A / A+ / A++) ─────────────────────────
   The kit's global scale is 16 / 18 / 21px, tuned for older readers. This is a
   K-2 sign-in page, so the whole scale shifts up and the page's own type keys
   off the base in em, which is what makes A+ / A++ move anything other than
   inherited text.

   Both kit classes MUST be redeclared: without them, picking A+ would drop the
   page from 25px to the kit's 18px — smaller than its own default. The
   selectors are body-scoped for the same reason, to out-specify the kit's
   body.ya-large-text h1/h2/h3/button rules, which would otherwise shrink the
   headings and the code buttons the moment a child enlarges the text. */
body.sp-app                     { font-size: 25px; }
body.sp-app.ya-large-text       { font-size: 28px; }
body.sp-app.ya-extra-large-text { font-size: 33px; }

body.sp-app h1                     { font-size: clamp(27px, 4vw, 40px); }
body.sp-app.ya-large-text h1       { font-size: clamp(30px, 4.4vw, 45px); }
body.sp-app.ya-extra-large-text h1 { font-size: clamp(34px, 5vw, 52px); }

/* The page's own type sits just above its original design sizes rather than
   tracking the 25px base one-for-one — a 25px body is for reading copy, not for
   every label and button. The em keeps A+ / A++ moving all of it. */
body.sp-app .sp-eyebrow         { font-size: .5em; }
body.sp-app .sp-step-title      { font-size: .96em; }
body.sp-app .sp-lede            { font-size: .88em; }
body.sp-app .sp-instruction     { font-size: .8em; }
body.sp-app .sp-legacy-group h3 { font-size: .64em; }
body.sp-app .sp-form label      { font-size: .54em; }
body.sp-app .sp-form input      { font-size: .76em; }
body.sp-app .sp-code-input      { font-size: .84em; }
body.sp-app .sp-error           { font-size: .54em; }
body.sp-app .sp-slot            { font-size: 1em; }
body.sp-app .sp-legacy-option   { font-size: 1.04em; }
body.sp-app .sp-name            { font-size: .7em; }
body.sp-app .sp-primary,
body.sp-app .sp-secondary       { font-size: .7em; }
body.sp-app .sp-back,
body.sp-app .sp-selected-student { font-size: .68em; }
body.sp-app .sp-text-link,
body.sp-app .sp-change-class,
body.sp-app .sp-footer button   { font-size: .54em; }
body.sp-app .sp-empty           { font-size: .8em; }

/* The accessibility panel is the kit's own UI, sized for a ~16px host page. It
   inherits from body, so the raised base blew its labels onto two lines. The
   kit already pins it at 15px for its large-text tiers; do that at every tier
   here, since this page's default is larger than the kit's largest. */
body.sp-app .ya-panel,
body.sp-app .ya-panel * { font-size: 15px; }
body.sp-app .ya-panel h2 { font-size: 17px; }

@media (max-width: 680px) {
  .sp-main { padding-inline: 12px; }
  .sp-brand img { height: 26px; }
  .sp-card { padding: 23px 16px; border-radius: 14px; }
  .sp-picture-grid { grid-template-columns: repeat(4, 1fr); }
  .sp-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sp-app .sp-name { padding: 9px; font-size: .68em; }
}

@media (max-width: 400px) { .sp-picture-grid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media print { .sp-topbar, .sp-footer, .sp-change-class { display: none; } body { background: #fff; } .sp-card { box-shadow: none; } }