/* The AI Lessons sample's own bits: links to lessons that are not in it, its notes, the reminder preview and the
   "choose who to be" page (its look is the live sign-in page's). */
a[data-sample="off"]{opacity:.55;cursor:not-allowed}
.sample-note{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);z-index:2147483646;max-width:min(560px,calc(100vw - 32px));background:#21076C;color:#fff;border-radius:12px;padding:12px 16px;font:500 14px/1.45 "DM Sans",system-ui,sans-serif;box-shadow:0 8px 24px rgba(17,4,56,.3)}
.sample-note[hidden]{display:none}

dialog.sample-mail{max-width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 64px);border:0;border-radius:16px;padding:22px 24px;font:15px/1.5 "DM Sans",system-ui,sans-serif;color:#1A1A1A;box-shadow:0 20px 60px rgba(17,4,56,.35)}
dialog.sample-mail::backdrop{background:rgba(17,4,56,.45)}
dialog.sample-mail h2{margin:0 0 6px;color:#21076C;font-size:20px}
dialog.sample-mail section{border:1px solid #E6E1F5;border-radius:12px;padding:12px 14px;margin:12px 0}
dialog.sample-mail .to{margin:0;color:#555;font-size:13px}
dialog.sample-mail .su{margin:2px 0 8px;font-weight:700;color:#21076C}
dialog.sample-mail pre{margin:0;white-space:pre-wrap;font:13.5px/1.5 "DM Sans",system-ui,sans-serif}
dialog.sample-mail button{font:inherit;font-weight:700;color:#fff;background:#21076C;border:0;border-radius:999px;padding:9px 20px;cursor:pointer}

body.sample-login{margin:0;background:#F2EFFA;min-height:100vh;display:flex;flex-direction:column}
.sample-login .login-top{background:#21076C;border-bottom:4px solid #D8B664;padding:16px}
.sample-login .login-top img{display:block;height:40px;width:auto;margin:0 auto}
.sample-login main.login{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px 80px}
.sample-login .card{background:#fff;border:1px solid #E6E1F5;border-radius:16px;max-width:560px;width:100%;padding:28px 24px;box-shadow:0 8px 30px rgba(33,7,108,.08)}
.sample-login .card h1{font-size:24px;color:#21076C;margin:0 0 6px;text-align:center}
.sample-login .card p{margin:0 0 14px;color:#444;line-height:1.5}
.sample-login .card [dir=rtl]{text-align:center;font-family:Tahoma,"Segoe UI",Arial,sans-serif}
.sample-login .msg{min-height:1.5em;color:#b3261e;font-weight:600;text-align:center}
.sample-login .msg.ok{color:#137333}
.sample-login .small{font-size:13px;color:#666}
.people{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.person{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:start;font:inherit;color:#1A1A1A;background:#fff;border:1px solid #C8BEE8;border-radius:14px;padding:12px 14px;cursor:pointer}
.person:hover{border-color:#21076C;box-shadow:0 6px 18px rgba(33,7,108,.10)}
.person .ico{font-size:22px;line-height:1.2}
.person b{display:block;color:#21076C}
.person small{display:block;color:#555;font-size:13.5px;line-height:1.4;margin-top:2px}
.linkish{font:inherit;color:#21076C;font-weight:700;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}