/* ========================================================================== QT Trading Lab — account: sign-in in the shell, the sign-in and locked course screens, and course access on library cards. Markup comes from qt-shell.js, course-app.js and library.html. Requires qt-tokens.css and qt-components.css. ========================================================================== */ /* The library needs an account: keep it hidden while sign-in is checked and while a signed-out visitor is sent to the landing page. is set by qt-auth.js. */ html[data-qt-auth="loading"] body[data-page="library"] .lib, html[data-qt-auth="signed-out"] body[data-page="library"] .lib, html[data-qt-auth="signed-out"] body[data-page="dashboard"] .dash { visibility: hidden; } /* ---- Sidebar account block ---- */ .qt-account { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .qt-account-copy { margin: 0; font-size: 12px; line-height: 1.45; color: var(--color-text-muted); } .qt-account-signin { width: 100%; min-height: 34px; font-size: 13px; } .qt-account.is-signed-in { flex-direction: row; align-items: center; gap: 6px; padding: 8px; } .qt-account-who { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 2px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .qt-account-who:hover .qt-account-email { color: var(--color-text); } .qt-account-avatar { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-accent-300); font: 500 12px/1 var(--font-mono); object-fit: cover; } .qt-account-text { display: flex; flex-direction: column; min-width: 0; } .qt-account-email { overflow: hidden; font-size: 12px; color: var(--color-text-muted); text-overflow: ellipsis; white-space: nowrap; } .qt-account-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--color-text-faint); } .qt-account-signout { flex: none; padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-faint); font: 11px/1.2 var(--font-body); cursor: pointer; } .qt-account-signout:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); } /* ---- Mobile header account button ---- */ .qt-mobilebar-account { margin-left: auto; } .qt-mobile-account { display: grid; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .qt-mobile-signin { min-height: 32px; padding: 6px 12px; font-size: 13px; } /* ---- Locked course (course-app.js) ---- */ .course-locked { max-width: 620px; margin: 40px auto; padding: 28px; } /* The screen replaces the course, so its title is the page's h1. */ .course-locked h1 { margin: 8px 0 10px; font-size: 22px; font-weight: 500; line-height: 1.25; text-wrap: balance; } .course-locked p { margin: 0 0 12px; color: var(--color-text-muted); } .course-locked strong { color: var(--color-text); font-weight: 500; } .course-locked .course-locked-note { margin-top: 16px; padding: 10px 12px; border-left: 2px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); font-size: 14px; } .course-locked-note[hidden] { display: none; } .course-locked-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .course-locked .course-locked-fine { margin: 16px 0 0; font-size: 12.5px; color: var(--color-text-faint); } .course-locked-fine a { color: var(--color-text-muted); text-underline-offset: 3px; } .course-locked-fine a:hover { color: var(--color-accent-300); } .course-gate-loading { margin: 72px auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-align: center; color: var(--color-text-faint); } /* ---- Library cards (library.html) ---- */ .lib-track[data-access] .lib-track-status { color: var(--pl-warn); }