/* The free app's bar over a course or lesson (shell.php): the site's purple, white text and buttons; nothing shared
   with the lesson. */
:root { --ink: #241b2e; --ink-2: #4a4056; --muted: #756d81; --line: #ece6f3; --line-strong: #dacfe6; --brand: #9f44bc; --brand-ink: #7c3798; --soft: #f8f5fc; --bar: 5.6rem; }
html { font-size: 62.5%; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #fff; }
.app-shell { font: 500 1.5rem/1.3 'Manrope', system-ui, sans-serif; color: var(--ink); }
.as-bar { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: 1rem; height: var(--bar); padding: 0 1.6rem; box-sizing: border-box; background: var(--brand-ink); color: #fff; box-shadow: 0 0.2rem 1.2rem rgba(36, 27, 46, 0.18); }
.as-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #65bd82, #ffdc4c, #ff9d32, #73d6f1, #9f44bc); }
.as-brand { display: inline-flex; align-items: center; gap: 0.8rem; color: #fff; text-decoration: none; font: 800 1.6rem/1 'Montserrat', system-ui, sans-serif; white-space: nowrap; }
.as-mark { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 0.9rem; background: #fff; color: var(--brand-ink); font-size: 1.9rem; }
.as-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 3.6rem; padding: 0 1.3rem; border: 1px solid #fff; border-radius: 999px; background: #fff; color: var(--ink); font: 600 1.4rem/1 'Manrope', system-ui, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.as-btn:hover { background: #ffdc4c; border-color: #ffdc4c; }
.as-btn:focus-visible, .as-switch select:focus-visible, .as-brand:focus-visible { outline: 2px solid #ffdc4c; outline-offset: 2px; }
.as-title { margin: 0 0 0 0.4rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #fff; }
.as-switch select { height: 3.6rem; max-width: 22rem; padding: 0 3rem 0 1.2rem; border: 1px solid #fff; border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241b2e' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1.1rem center; color: var(--ink); font: 600 1.4rem/1 'Manrope', system-ui, sans-serif; appearance: none; cursor: pointer; }
.as-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.as-grow { flex: 1; }
.as-until { color: rgba(255, 255, 255, 0.85); font: 500 1.3rem/1 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; }
.as-frame { position: fixed; top: var(--bar); left: 0; width: 100%; height: calc(100% - var(--bar)); border: 0; display: block; background: #fff; }
@media (max-width: 900px) { .as-until, .as-all { display: none; } }
@media (max-width: 600px) {
  :root { --bar: 5.2rem; }
  .as-bar { gap: 0.6rem; padding: 0 1rem; }
  .as-name, .as-back span, .as-out span, .as-title { display: none; }
  .as-btn { padding: 0 1rem; }
  .as-switch { flex: 1; min-width: 0; }
  .as-switch select { width: 100%; max-width: none; }
  .as-grow { display: none; }
}