/* The ten stumpers on the landing page. Markup and content are shared with the course
   (../storyboards/literacy-course/src3/stumper-quiz.js and stumpers.json); this file paints it in the page's neutral satin. */
.stumpers-entry{display:inline-flex;align-items:center;gap:8px;margin-top:20px;min-height:44px;padding:10px 2px;border:0;background:transparent;font-size:14px;line-height:1.3;letter-spacing:normal;color:var(--muted,#69676e);text-align:left;white-space:normal}
.stumpers-entry:hover{color:var(--ink,#353538);text-decoration:underline;text-underline-offset:3px}
.stumpers-entry span{transition:translate 160ms var(--ease)}.stumpers-entry:hover span{translate:3px 0}
.sq{--sq-ok:#2f7a57;--sq-no:#a8423d;position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:48px 16px 64px;background:#f8f8f7f2;color:var(--ink,#353538);font-size:16px;line-height:1.5}
.sq-open,.sq-open body{overflow:hidden}
.sq [hidden]{display:none!important}
.sq-panel{width:100%;max-width:680px;padding:20px 28px 28px;border-radius:24px;background:var(--inset-surface,#eeeeef);box-shadow:var(--inset-shadow,inset 0 2px 4px #24242c18);animation:sq-in 220ms var(--ease)}
@keyframes sq-in{from{opacity:0;translate:0 8px}}
.sq-top{display:flex;align-items:center;gap:16px}
.sq-count{font-size:13px;color:var(--muted,#69676e);white-space:nowrap;font-variant-numeric:tabular-nums}
.sq-bar{flex:1;display:flex;gap:4px;margin:0;padding:0;list-style:none}
.sq-bar li{flex:1;height:6px;border-radius:3px;background:#dcdcdf}
.sq-bar li.is-right{background:var(--sq-ok)}
.sq-bar li.is-wrong{height:3px;margin-top:1.5px;background:var(--sq-no)}
.sq-bar li.is-now{box-shadow:0 0 0 2px var(--ink,#353538)}
.sq-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:#f3f3f3;color:var(--ink,#353538);font-size:22px;line-height:1;box-shadow:inset 0 1px #fff,0 1px 2px #24242c16}
.sq-x:hover{background:#fafafa}
.sq-q{margin:22px 0 18px;font-size:24px;line-height:1.25;font-weight:500;letter-spacing:-.02em;color:var(--ink,#353538)}
.sq-q:focus,.sq-read:focus{outline:none}
.sq-options{display:grid;gap:10px}
.sq-option{display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:start;width:100%;min-height:56px;padding:13px 16px;border:0;border-radius:15px;background:#f3f3f3;color:var(--ink,#353538);font-size:16px;line-height:1.4;text-align:left;box-shadow:inset 0 1px 1px #ffffffed,0 1px 2px #24242c16,0 3px 6px -2px #24242c1a;transition:box-shadow 140ms,background 140ms}
.sq-option:hover:not(:disabled){background:#fafafa;box-shadow:inset 0 1px 1px #fff,0 2px 4px #24242c1c,0 6px 12px -4px #24242c22}
.sq-option:disabled{cursor:default}
.sq-letter{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e6e6e8;font-size:13px;font-weight:600;color:var(--muted,#69676e)}
.sq-tag{grid-column:2;margin-top:2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.sq-tag:empty{display:none}
.sq-option.is-best{background:#eef6f1;box-shadow:inset 0 0 0 2px var(--sq-ok)}
.sq-option.is-best .sq-tag,.sq-option.is-best .sq-letter{color:var(--sq-ok)}
.sq-option.is-wrong{background:#f8eeed;box-shadow:inset 0 0 0 2px var(--sq-no)}
.sq-option.is-wrong .sq-tag,.sq-option.is-wrong .sq-letter{color:var(--sq-no)}
.sq-option.is-wrong .sq-text{text-decoration:line-through;text-decoration-thickness:1px}
.sq-option.is-dim{opacity:.55;box-shadow:none}
.sq-reveal{margin-top:22px;padding-top:18px;border-top:1px solid var(--line,#0000001f)}
.sq-verdict{margin:0 0 10px;font-size:18px;font-weight:600}
.sq-points{margin:0 0 14px;padding-left:20px;font-size:15px}
.sq-points li{margin:4px 0}
.sq-learn{margin:0;font-size:14px;color:var(--muted,#69676e)}
.sq-learn b{font-weight:600;color:var(--ink,#353538)}
.sq-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.sq-next,.sq-alt{min-height:44px;padding:11px 22px;border:0;border-radius:100px;font-size:14px;font-weight:500}
.sq-next{color:#fff;background:linear-gradient(160deg,#4a4a52,#26262c);box-shadow:0 2px 4px #24242c26,inset 0 1px #ffffff26}
.sq-next:hover{background:linear-gradient(160deg,#55555e,#2e2e35)}
.sq-alt{background:#f3f3f3;color:var(--ink,#353538);box-shadow:inset 0 1px #fff,0 1px 2px #24242c16}
.sq-alt:hover{background:#fafafa}
.sq-retake{margin-left:auto}
.sq-score{margin:26px 0 4px;font-size:64px;line-height:1;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sq-score span{font-size:28px;color:var(--muted,#69676e)}
.sq-read{max-width:30ch;margin:10px 0 6px;font-size:22px;line-height:1.3;font-weight:400;letter-spacing:-.02em}
@media(max-width:600px){.sq{padding:0}.sq-panel{min-height:100%;border-radius:0;padding:max(14px,var(--safe-top,0px)) 16px max(28px,var(--safe-bottom,0px))}.sq-q{font-size:21px}.sq-retake{margin-left:0}.sq-row>button{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.sq-panel{animation:none}.sq-option,.stumpers-entry span{transition:none}}
/* open answers, the email step and the graded results */
.sq-bar li.is-done{background:#8d8b93}
.sq-bar li.is-mixed{height:4.5px;margin-top:.75px;background:#b07a1c}
.sq-answer{display:block;width:100%;min-height:150px;resize:vertical;border:0;border-radius:15px;padding:14px 16px;background:#f9f9f9;color:var(--ink,#353538);font:inherit;font-size:16px;line-height:1.5;box-shadow:inset 0 1px 2px #24242c18,inset 0 0 0 1px #34343d14}
.sq-answer:focus{outline:2px solid #6f57a6;outline-offset:2px}
.sq-next:disabled{opacity:.4;cursor:default}
.sq-wait{margin:40px 0 20px;font-size:17px;color:var(--muted,#69676e)}
.sq-gate{display:grid;gap:16px;margin-top:18px}
.sq-gate label{display:grid;gap:8px;font-size:14px}
.sq-gate input{font:inherit;color:inherit;background:#f9f9f9;border:1px solid #77727d30;border-radius:12px;padding:14px;min-width:0;width:100%}
.sq-gate input:focus{outline:2px solid #6f57a6;outline-offset:2px}
.sq-notice{margin:0;font-size:14px;color:var(--muted,#69676e)}
.sq-status{margin:0;min-height:24px;font-size:14px}
.sq-score.is-partial b{color:var(--muted,#69676e)}
.sq-results{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.sq-result{padding:18px 0 4px;border-top:1px solid var(--line,#0000001f)}
.sq-rq{margin:0 0 10px;font-size:17px;line-height:1.3;font-weight:600}
.sq-yours{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:#f6f6f6;font-size:14px;color:var(--muted,#69676e);white-space:pre-wrap}
.sq-results .sq-points{list-style:none;padding:0;display:grid;gap:10px}
.sq-point{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;margin:0}
.sq-point>.sq-pt{grid-column:1/-1}
.sq-point .sq-pt,.sq-point .sq-why{margin:0}
.sq-point .sq-why{font-size:13px;color:var(--muted,#69676e);margin-top:2px}
.sq-verdict{display:inline-flex;align-items:center;gap:6px;width:104px;padding:6px 9px;border-radius:100px;background:#e6e6e8;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.sq-mark{font-size:14px;line-height:1}
.sq-point.is-correct .sq-verdict{color:var(--sq-ok);background:#e4f0e9}
.sq-point.is-incorrect .sq-verdict{color:var(--sq-no);background:#f6e5e3}
.sq-point.is-mixed .sq-verdict{color:#8a5a0c;background:#f6ecd8}
.sq-self{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.sq-pick{min-height:40px;padding:8px 14px;border:0;border-radius:100px;background:#f3f3f3;color:var(--ink,#353538);font-size:13px;font-weight:500;box-shadow:inset 0 1px #fff,0 1px 2px #24242c16}
.sq-pick:hover{background:#fafafa}
.sq-pick[aria-pressed=true]{background:linear-gradient(160deg,#4a4a52,#26262c);color:#fff;box-shadow:none}
.sq-result .sq-learn{margin-top:12px}