/* The parody LMS. Deliberately dated and fiddly, but safe: no flashing, motion respects prefers-reduced-motion. */
.course-root { background-color:#d4d0c8; min-height:100vh; padding: 12px; font-family: Tahoma, Verdana, Arial, sans-serif; color:#222; }
.course-root:has(.cert-screen) { background-color:var(--bg); }
.lms { max-width: 960px; margin: 0 auto; background:#f4f4f0; border:2px outset #fff; }
.lms-head { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(#1f4e8c,#0d2f5e); color:#fff; padding:6px 10px; }
.lms-title { font-size:13px; font-weight:bold; }
.lms-logo { margin-right:6px; opacity:.8; }
.lms-progress { display:flex; align-items:center; gap:10px; padding:6px 10px; background:#e4e2da; border-bottom:1px solid #aaa; font-size:11px; }
.bar { flex:1; height:10px; background:#fff; border:1px inset #999; }
.bar-fill { height:100%; width:0; background:#4a8a3c; transition: width .6s ease; }
.slide-label { white-space:nowrap; color:#555; }
.slide-label.glitch { color:#555; }
.slide { padding: 18px 22px; min-height: 360px; font-size: 13px; line-height: 1.45; outline:none; }
.slide h1 { font-size:22px; color:#0d2f5e; }
.slide h2 { font-size:16px; color:#0d2f5e; border-bottom:1px solid #bbb; padding-bottom:4px; }
.slide h3 { font-size:14px; }
.sub { color:#666; }
.lms-foot { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:#e4e2da; border-top:1px solid #aaa; gap:8px; }
.foot-note { font-size:10px; color:#777; text-align:center; }
.lms-btn { font:12px Tahoma, Verdana, sans-serif; padding:3px 12px; border:2px outset #fff; background:#e1e1dc; cursor:pointer; min-height:24px; }
.lms-btn.primary { font-weight:bold; }
.lms-btn.small { padding:1px 8px; min-height:20px; font-size:11px; }
.lms-btn:disabled { color:#999; background:#ddd; border-style:solid; border-color:#ccc; cursor:not-allowed; }
.lms-btn:focus-visible, .tab:focus-visible, .choice:focus-visible { outline:2px dotted #333; outline-offset:1px; }
.loading { text-align:center; padding:100px 0; color:#555; }
.spinner { width:28px; height:28px; margin:0 auto 12px; border:4px solid #ccc; border-top-color:#1f4e8c; border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sysreq { color:#444; }
/* Narrator */
.narrator { display:flex; align-items:center; gap:10px; background:#e9eef6; border:1px solid #9bb; padding:6px 10px; margin:8px 0 12px; font-size:11px; }
.wave { display:flex; align-items:center; gap:2px; height:22px; flex:1; }
.wave i { display:block; width:3px; background:#1f4e8c; height:6px; animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--d) * -90ms); }
.narrator.done .wave i, .narrator.still .wave i { animation:none; height:8px; opacity:.4; }
@keyframes wave { 0%,100% { height:4px; } 50% { height:20px; } }
.narr-time { font-variant-numeric: tabular-nums; }
/* Tabs */
.tabs { display:flex; gap:2px; flex-wrap:wrap; }
.tab { font:11px Tahoma, sans-serif; padding:3px 9px; border:1px solid #999; border-bottom:0; background:#ddd; color:#777; cursor:pointer; min-height:22px; }
.tab.active { background:#fff; color:#222; font-weight:bold; }
.tab .tick { display:inline-block; width:12px; color:#2d7a2d; }
.tab-panel { border:1px solid #999; background:#fff; padding:10px 14px; min-height:200px; }
.gate-note { font-size:11px; color:#a33; }
/* Interaction */
.kc-label { font-size:11px; color:#777; margin:0 0 4px; }
.options, .choices { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.option { display:flex; gap:8px; align-items:flex-start; padding:5px 8px; border:1px solid #ccc; background:#fff; cursor:pointer; }
.option input { margin-top:2px; }
.choice { text-align:left; font:13px Tahoma, sans-serif; padding:6px 10px; border:1px solid #bbb; background:#fff; cursor:pointer; }
.choice:disabled { color:#888; cursor:default; }
.feedback { min-height:1.4em; font-weight:bold; }
.feedback.ok { color:#2d7a2d; }
.feedback.bad { color:#b32; }
.dave { display:flex; gap:10px; align-items:center; margin:6px 0 10px; }
.avatar { width:42px; height:42px; border-radius:50%; background:#8aa; color:#fff; font:bold 22px Arial; display:grid; place-items:center; }
.role { color:#777; font-size:11px; }
.results th { text-align:left; padding-right:24px; }
.attest { display:flex; gap:6px; align-items:center; margin-top:14px; font-size:12px; }
/* Modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); display:grid; place-items:center; z-index:10; }
.modal { background:#f4f4f0; border:2px outset #fff; padding:14px 18px; max-width:340px; font:12px Tahoma, sans-serif; }
/* Mobile: still annoying, just usable */
@media (max-width: 600px) {
  .course-root { padding:0; }
  .slide { padding:14px 12px; }
  .foot-note { display:none; }
  .lms-foot { position:sticky; bottom:0; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner, .wave i { animation:none; }
  .bar-fill { transition:none; }
}
/* Anomalies and easter eggs */
.lms { position: relative; }
.toast { position:absolute; top:84px; right:10px; max-width:260px; background:#ffffe1; border:1px solid #000; box-shadow:2px 2px 0 #888; font:11px Tahoma, sans-serif; padding:6px 8px; z-index:5; animation: fadein .25s ease-out; }
.cameo { position:absolute; right:12px; bottom:60px; display:flex; gap:8px; align-items:flex-end; z-index:5; animation: fadein .25s ease-out; }
.cameo .avatar { width:34px; height:34px; font-size:18px; background:#6a8; }
.bubble { max-width:210px; background:#fff; border:1px solid #333; padding:6px 8px; font:11px Tahoma, sans-serif; box-shadow:2px 2px 0 #888; }
.rev-note { color:#a33; font-size:11px; }
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .toast, .cameo { animation:none; } }
/* Login */
.login-form { display:flex; flex-direction:column; gap:6px; max-width:380px; }
.login-form label { font-weight:bold; font-size:12px; margin-top:6px; }
.login-form input[type=text], .login-form select { font:13px Tahoma, sans-serif; padding:4px 6px; border:2px inset #fff; background:#fff; }
.login-form .attest { font-weight:normal; }
.row { display:flex; gap:8px; margin-top:8px; }
.fineprint { font-size:11px; color:#555; max-width:460px; margin-top:18px; }

.login-form input[type=text], .login-form select { width:100%; border-radius:0; }

/* The parody LMS is always a light, old-school UI, whatever the visitor's system theme. Without this, dark mode
   gave the sign-in field light text on a white box. */
.course-root, .lms { color-scheme: light; color: #222; }
.lms input[type=text], .lms select, .lms textarea { color: #222; background: #fff; }
.lms input::placeholder { color: #777; }
.sound-state { font-size:11px; color:#555; margin:6px 0 10px; }
.slide h1 { font-size:20px; }
.lms.login h1 { font-size:20px; color:#0d2f5e; border-bottom:1px solid #bbb; padding-bottom:4px; }
.warn { background:#fdecea; border:1px solid #c33; color:#a11; padding:4px 8px; font-size:11px; font-weight:bold; }

/* Links inside the course text, the OPEN BOOK label, and the Resources list (a classic LMS feature) */
.doc-link { color: #0645ad; text-decoration: underline; }
.doc-link:visited { color: #6b3fa0; }
.ob-label { font-size: 11px; margin: 0 0 4px; color: #7a1f1f; background: #fff4d6; border: 1px solid #d9b45a; padding: 3px 8px; display: inline-block; }
.head-btns { display: flex; gap: 6px; align-items: center; }
.res-intro { font-size: 12px; margin: 0 0 8px; }
.resources { margin: 0; padding-left: 18px; font-size: 12px; text-align: left; }
.resources li { margin: 6px 0; }
.res-note { color: #777; font-size: 11px; }
.modal:has(.resources) { max-width: 440px; }

/* Phones: the LMS window never exceeds the screen */
.slide, .quiz, .scenario, .options, .choices { max-width: 100%; min-width: 0; }
.lms { overflow-x: hidden; }
.slide table, .slide pre { display: block; overflow-x: auto; max-width: 100%; }
.modal { max-width: min(340px, 92vw); }
.modal:has(.resources) { max-width: min(440px, 92vw); }
.toast, .bubble, .cameo { max-width: min(260px, 80vw); }
@media (max-width: 600px) {
  .lms-head { flex-wrap: wrap; gap: 6px; }
  .tabs, .tab-row { flex-wrap: wrap; }
  .lms-foot { gap: 6px; }
}