/* Sankofa Tutor — chalkboard explanation panel. Works inside the portal and the interactive books. */
.st-pill {
  position: fixed; z-index: 2147483000; display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: #1b2f63; box-shadow: 0 8px 28px rgba(10, 20, 50, .35); opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .15s, transform .15s; font: 600 14px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.st-pill.on { opacity: 1; pointer-events: auto; transform: none; }
.st-pill button { border: 0; background: transparent; color: #fff; padding: 9px 13px; border-radius: 999px; cursor: pointer; font: inherit; white-space: nowrap; }
.st-pill button:first-child { background: #f2e733; color: #2b2700; }
.st-pill button:hover { filter: brightness(1.08); }

html.st-lock, html.st-lock body { overflow: hidden; }
.st-back {
  position: fixed; inset: 0; z-index: 2147483001; background: rgba(8, 14, 30, .62); display: grid; place-items: center; padding: 12px;
  font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #18222e;
}
.st-panel {
  width: min(980px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; background: #f6f4ee; border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4); display: flex; flex-direction: column;
}
@media (max-width: 640px) { .st-back { padding: 0; place-items: stretch; } .st-panel { max-height: none; height: 100%; border-radius: 0; } }
.st-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e3e0d6; position: sticky; top: 0; background: #f6f4ee; z-index: 2; }
.st-crest { border-radius: 50%; background: #fff; flex: none; }
.st-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.st-titles b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #29478d; }
.st-title { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-x { border: 0; background: #e9e6dc; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 16px; color: #333; }
.st-x:hover { background: #ddd9cc; }
.st-source { padding: 10px 16px 0; }
.st-source q { display: block; font-size: 14px; color: #555; border-left: 3px solid #f2e733; padding: 4px 10px; background: #fffdf0; border-radius: 0 8px 8px 0; max-height: 4.8em; overflow: hidden; }
.st-source q::before, .st-source q::after { content: none; }
.st-source img { max-height: 90px; max-width: 100%; border-radius: 8px; border: 1px solid #ddd; display: block; }
.st-ask { padding: 12px 16px 0; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.st-ask label { flex: 1; min-width: 220px; display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.st-ask input, .st-input input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #cfcbbd; font: inherit; background: #fff; color: #18222e; }
.st-ask input:focus, .st-input input:focus { outline: none; border-color: #29478d; box-shadow: 0 0 0 3px rgba(41, 71, 141, .2); }

.st-board {
  --u: 5px; position: relative; margin: 12px 16px 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, #2a3b36 0%, #1f2d29 55%, #19241f 100%);
  box-shadow: inset 0 0 0 6px #7a5a3a, inset 0 0 0 8px #5d4229, inset 0 0 40px rgba(0, 0, 0, .45);
}
.st-board > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-layer { position: absolute; inset: 0; pointer-events: none; }
.st-txt {
  position: absolute; white-space: nowrap; font-family: 'Caveat', 'Comic Sans MS', cursive; font-weight: 600;
  font-size: calc(var(--u) * var(--fs, 6.2)); line-height: 1.05; text-shadow: 0 0 1px currentColor, 0 0 6px rgba(255, 255, 255, .08);
}
.st-txt mjx-container { color: inherit; }
.st-txt mjx-container[jax="SVG"] > svg { overflow: visible; }
.st-math { font-size: calc(var(--u) * var(--fs, 6.2) * .82); }
.st-wait { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; gap: 8px; align-items: center; color: #e9e4d3; }
.st-wait.off { display: none; }
.st-wait span { width: 10px; height: 10px; border-radius: 50%; background: #f2e733; animation: st-blink 1s infinite; }
.st-wait span:nth-child(2) { animation-delay: .15s; }
.st-wait span:nth-child(3) { animation-delay: .3s; }
.st-wait em { grid-column: 1 / -1; font: 600 22px 'Caveat', cursive; font-style: normal; text-align: center; margin-top: 6px; }
@keyframes st-blink { 50% { opacity: .2; } }

.st-say { margin: 10px 16px 0; min-height: 3em; font-size: 16.5px; line-height: 1.5; color: #1d2433; }
.st-say.in { animation: st-in .35s ease; }
@keyframes st-in { from { opacity: 0; transform: translateY(4px); } }
.st-ctrl { display: flex; align-items: center; gap: 6px; padding: 8px 16px 0; }
.st-dots { flex: 1; display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.st-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: #d6d1c3; cursor: pointer; }
.st-dots button.past { background: #8fa3cf; }
.st-dots button.on { background: #29478d; transform: scale(1.3); }
.st-more { color: #888; font-weight: 700; letter-spacing: 1px; }
.st-btn {
  border: 1px solid #cfcbbd; background: #fff; color: #18222e; border-radius: 10px; padding: 8px 14px; font: 600 14px system-ui, sans-serif; cursor: pointer; min-height: 38px;
}
.st-btn:hover { background: #f1eee5; }
.st-btn.icon { width: 40px; padding: 0; font-size: 15px; }
.st-btn.on { background: #29478d; color: #fff; border-color: #29478d; }
.st-btn.primary { background: #29478d; color: #fff; border-color: #29478d; }
.st-btn.primary:hover { background: #1f3a78; }
.st-after { padding: 12px 16px 16px; display: grid; gap: 12px; }
.st-check { background: #fff; border: 1px solid #e3e0d6; border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.st-cq { font-weight: 600; }
.st-cq span { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #29478d; padding: 2px 8px; border-radius: 6px; margin-right: 8px; vertical-align: 2px; }
.st-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.st-choices button { text-align: left; border: 1.5px solid #d6d1c3; background: #fbfaf6; border-radius: 10px; padding: 10px 12px; font: inherit; cursor: pointer; color: inherit; }
.st-choices button:hover:not(:disabled) { border-color: #29478d; }
.st-choices button.right { border-color: #1f8a4c; background: #e3f4ea; }
.st-choices button.wrong { border-color: #c0392b; background: #fbe7e4; }
.st-fb { padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.st-fb.ok { background: #e3f4ea; } .st-fb.ok b { color: #1f8a4c; }
.st-fb.bad { background: #fbe7e4; } .st-fb.bad b { color: #c0392b; }
.st-follow { display: flex; gap: 8px; flex-wrap: wrap; }
.st-chip { border: 1px solid #c9d2e8; background: #eef2fb; color: #29478d; border-radius: 999px; padding: 7px 12px; font: 600 13.5px system-ui, sans-serif; cursor: pointer; }
.st-chip:hover { background: #e0e8f8; }
.st-input { display: flex; gap: 8px; }
.st-err { background: #fbe7e4; color: #a32b20; padding: 10px 12px; border-radius: 10px; }

/* Rectangle selection on PDF pages (portal reader) */
.st-crop { position: absolute; inset: 0; cursor: crosshair; z-index: 5; touch-action: none; background: rgba(27, 47, 99, .08); }
.st-crop .box { position: absolute; border: 2px dashed #29478d; background: rgba(242, 231, 51, .18); border-radius: 4px; }
.st-crop .hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #1b2f63; color: #fff; padding: 7px 12px; border-radius: 999px; font: 600 13px system-ui, sans-serif; white-space: nowrap; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .st-say.in { animation: none; } .st-wait span { animation: none; } }
@media (prefers-color-scheme: dark) {
  .st-panel, .st-head { background: #1b2030; color: #e8ecf5; } .st-head { border-color: #2c3346; }
  .st-say { color: #e8ecf5; } .st-x { background: #2a3145; color: #e8ecf5; }
  .st-source q { background: #2a2a1c; color: #d8d4c0; }
  .st-check, .st-btn, .st-choices button, .st-ask input, .st-input input { background: #222838; color: #e8ecf5; border-color: #3a4258; }
  .st-choices button.right { background: #16352a; } .st-choices button.wrong { background: #3a1f1d; }
  .st-chip { background: #1f2d55; color: #c9d6ff; border-color: #33467a; }
  .st-dots button { background: #3a4258; }
}
.st-crop-bar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
/* Keep the 16:10 board (and everything else) at natural size inside the scrolling panel. */
.st-panel > * { flex: none; }