/* Open Learning app: install prompt, messages question, app settings (js/app.js). See docs/app.md.
   Loaded only when sw_mode is live. Uses the site colours from styles.css. Sits below the chatbot
   (z-index 2147483000) and lifts the chatbot button while a prompt is open. */
.ola-sheet { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2147482000; max-width: 520px; margin: 0 auto; display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--paper, #fff); color: var(--ink, #26424a); border: 1px solid var(--line, #d7e0dd); border-radius: 18px; box-shadow: 0 18px 48px rgba(38, 66, 74, .22); font-family: var(--sans, sans-serif); animation: ola-in .25s ease-out; }
@keyframes ola-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ola-sheet { animation: none; } }
.ola-icon { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.ola-body { flex: 1; min-width: 0; }
.ola-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink, #26424a); }
.ola-text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink-soft, #5a6e72); text-wrap: pretty; }
.ola-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ola-row.ola-end { justify-content: flex-end; margin-top: 8px; }
.ola-btn { font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; }
.ola-btn[hidden] { display: none; }
.ola-primary { background: var(--accent-deep, #15706a); color: #fff; }
.ola-primary:hover { background: var(--ink, #26424a); }
.ola-quiet { background: transparent; color: var(--ink, #26424a); border-color: var(--line, #d7e0dd); }
.ola-quiet:hover { border-color: var(--ink-soft, #5a6e72); }
.ola-btn:focus-visible, .ola-panel select:focus-visible { outline: 3px solid var(--accent-3, #66bd49); outline-offset: 2px; }
body.ola-has-sheet .cw-b { bottom: calc(24px + var(--ola-lift, 0px)); }
body.ola-has-sheet .cw-p { bottom: calc(96px + var(--ola-lift, 0px)); }
body:has(.nav.open) .ola-sheet { display: none; }
body.ola-has-panel .cw-w { display: none; }
.ola-scrim { position: fixed; inset: 0; z-index: 2147482500; background: rgba(38, 66, 74, .45); }
.ola-panel { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2147482600; max-width: 520px; margin: 0 auto; max-height: calc(100vh - 24px); overflow: auto; padding: 20px; background: var(--paper, #fff); color: var(--ink, #26424a); border-radius: 18px; box-shadow: 0 24px 60px rgba(38, 66, 74, .28); font-family: var(--sans, sans-serif); }
.ola-panel h2 { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 0 0 12px; outline: none; }
.ola-sec { padding: 14px 0; border-top: 1px solid var(--line-soft, #e7eeec); }
.ola-status { margin: 0 0 12px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.ola-panel label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.ola-panel select { font: inherit; font-size: 16px; min-height: 44px; width: 100%; padding: 0 12px; border: 1px solid var(--line, #d7e0dd); border-radius: 10px; background: #fff; color: var(--ink, #26424a); }
.ola-panel select:disabled { opacity: .55; }
.ola-note { margin: 8px 0 10px; font-size: 13px; line-height: 1.4; color: var(--ink-soft, #5a6e72); }
.ola-note:empty { display: none; }
.ola-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2147483100; width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ink, #26424a); color: #fff; font: 600 14px/1.4 var(--sans, sans-serif); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }