/* Accounts: locked content, the sign-up dialog, onboarding and the account card. */

/* Locked links and rows */
.is-locked{position:relative}
.lock-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:8px;border-radius:6px;background:var(--soft);color:var(--muted);flex:none;vertical-align:middle}
.lock-badge svg{width:13px;height:13px}
#nav a.is-locked .lock-badge{margin-left:auto;background:transparent;width:16px;height:16px}
/* Hidden only while the collapsed sidebar shows icons alone (not when it peeks open). */
body.sidebar-collapsed #sidebar:not(.is-peek-open) #nav a.is-locked .lock-badge{display:none}
.document-choice.is-locked>.lock-badge,.playbook-list>a.is-locked>.lock-badge,.featured-document.is-locked>.lock-badge{position:absolute;top:12px;right:12px;margin:0}
.is-locked:hover .lock-badge{color:var(--hl-ink);background:var(--tip)}
/* Locked buttons and rows: the lock replaces the arrow and takes the button's own colour. */
.button.is-locked>svg.icon,.home-route a.is-locked>svg.icon{display:none}
.button.is-locked .lock-badge,.button.is-locked:hover .lock-badge{width:auto;height:auto;margin:0;background:none;color:inherit}
.button.is-locked .lock-badge svg{width:14px;height:14px}
.home-route a.is-locked .lock-badge{margin-left:auto}

/* Course map */
.module-locked h3{color:var(--ink)}
.locked-pill{display:inline-flex;align-items:center;gap:6px;margin:2px 0 10px;padding:3px 9px;border-radius:99px;background:var(--soft);color:var(--muted);font:500 var(--fs-overline)/1.4 var(--mono);letter-spacing:.02em}
.module-locked .locked-pill{font-size:var(--fs-overline)}
.locked-pill svg{width:12px;height:12px}
.module-locked .lesson-status{display:none}
.module-locked details ol a{color:var(--muted)}
.module-locked details ol a:hover{color:var(--ink)}
.module-locked details ol a .lock-badge{margin-left:auto}
.module-locked .module-start.is-locked{display:inline-flex;align-items:center;gap:7px}
.module-locked .module-start.is-locked svg{width:14px;height:14px}

/* Glossary without an account */
.glossary-unlock{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:26px 0 8px;padding:20px 22px;border:1px dashed var(--line);border-radius:14px;background:var(--paper)}
.glossary-unlock h2{font:700 var(--fs-lead)/1.3 var(--display);margin:0 0 4px}
.glossary-unlock p{margin:0;font-size:var(--fs-ui);color:var(--muted);max-width:52ch}
.glossary-unlock .button{display:inline-flex;align-items:center;gap:7px}
.glossary-unlock .button svg{width:15px;height:15px}

/* Locked page (direct link) */
.locked-page{max-width:70ch}
.locked-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px}
.locked-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.locked-list li{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--fs-ui)}
.locked-list svg{width:14px;height:14px;flex:none}

/* Dialog */
.account-dialog{width:min(480px,calc(100vw - 32px));max-height:min(92vh,760px);overflow:auto;border-radius:14px}
.account-body{padding:26px 26px 22px}
.account-close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;z-index:1}
.account-close:hover{background:var(--soft);color:var(--ink)}
.account-close svg{width:18px;height:18px}
.account-mark{width:56px;height:56px;margin:0 0 16px}
.account-mark.small{width:40px;height:40px;margin-bottom:12px}
.account-mark .klauvy-mascot{display:block;width:100%;height:100%}
.dark .account-mark .klauvy-mascot>path:first-of-type{fill:#f1f1f2}
.dark .account-mark .klauvy-mascot>path:nth-of-type(2){fill:#17181b}
.dark .account-mark .klauvy-mascot .mascot-eyes{fill:#f1f1f2}
.dark .account-mark .klauvy-mascot .mascot-mouth{stroke:#f1f1f2}
.account-dialog h2{font:700 var(--fs-h3)/1.3 var(--display);margin:0 0 8px;letter-spacing:-.01em;outline:none}
.account-dialog .account-body>p{margin:0 0 4px;font-size:var(--fs-ui);line-height:1.6;color:var(--muted)}
.account-dialog .account-body>p b{color:var(--ink)}
.account-tabs{display:flex;gap:2px;margin:18px 0 4px;padding:3px;border-radius:9px;background:var(--soft)}
.account-tabs button{flex:1;border:0;background:transparent;padding:7px 10px;border-radius:7px;font:500 var(--fs-caption) var(--sans);color:var(--muted);cursor:pointer}
.account-tabs button[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px #0000001a}
.account-field{display:block;margin:14px 0 12px}
.account-field>span{display:block;font-size:var(--fs-caption);font-weight:600;margin-bottom:6px}
.account-field input{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-body);padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.account-field input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.account-code{font:600 var(--fs-h3)/1 var(--display)!important;letter-spacing:.35em;text-align:center}
.account-wide{width:100%;justify-content:center}
.account-dialog .button svg{width:16px;height:16px}
.account-fine{margin:12px 0 0!important;font-size:var(--fs-caption)!important}
.account-error{margin:0 0 12px;padding:9px 11px;border-radius:8px;background:var(--bad-t);color:var(--bad);font-size:var(--fs-caption)}
.account-link{border:0;background:none;padding:6px 0;font:inherit;font-size:var(--fs-caption);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.account-link:hover{color:var(--ink)}
.account-link:disabled{text-decoration:none;cursor:default;opacity:.8}
.account-error .account-link{color:inherit;padding:0}
/* Passwords and email confirmation */
.account-pw{position:relative}
.account-pw input{padding-right:64px}
.account-show{position:absolute;top:50%;right:6px;transform:translateY(-50%);border:0;background:none;padding:6px 8px;border-radius:6px;font:500 var(--fs-caption) var(--sans);color:var(--muted);cursor:pointer}
.account-show:hover{color:var(--ink);background:var(--soft)}
.account-rule{display:flex;align-items:center;gap:8px;margin:-4px 0 14px!important;font-size:var(--fs-caption)!important;color:var(--muted)}
.account-rule i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none}
.account-rule.ok{color:var(--ink)!important}
.account-rule.ok i{background:var(--ok);border-color:var(--ok);color:#fff}
.account-rule svg{width:10px;height:10px;stroke-width:3.5}
.account-under{display:flex;justify-content:flex-end;margin:-10px 0 8px}
.account-or{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:var(--fs-caption);color:var(--muted)}
.account-or::before,.account-or::after{content:'';flex:1;border-top:1px solid var(--line)}
.account-wait{display:flex;align-items:center;gap:8px;margin:14px 0 0!important;padding:8px 10px;border-radius:8px;background:var(--soft);font-size:var(--fs-caption)!important;color:var(--muted)}
.account-wait::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none;animation:account-pulse 1.6s ease-in-out infinite}
@keyframes account-pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.account-wait::before{animation:none}}
.account-stack{display:grid;gap:8px;margin-top:18px}
.account-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.account-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.account-foot .button:disabled{opacity:.45;cursor:not-allowed}

/* Onboarding */
.account-steps{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:500 var(--fs-overline)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.account-steps i{position:relative;flex:1;max-width:120px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.account-steps i::after{content:'';position:absolute;inset:0;width:calc(var(--p)*100%);background:var(--signal);border-radius:2px;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.account-notice{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:var(--fs-caption);line-height:1.55}
.account-notice ul{margin:0 0 8px;padding-left:18px}
.account-notice li{margin:3px 0}
.account-notice p{margin:0;color:var(--muted)}
.account-notice a{color:var(--ink)}
.account-check{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:var(--fs-ui);cursor:pointer}
.account-check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.account-choices{display:grid;gap:8px;margin:16px 0 4px}
.account-choices.compact{margin-top:8px;gap:6px}
.account-choice{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-ui);cursor:pointer;transition:border-color .15s,background .15s}
.account-choices.compact .account-choice{padding:9px 11px;font-size:var(--fs-ui)}
.account-choice:hover{border-color:var(--muted)}
.account-choice[aria-checked=true]{border-color:var(--ink);background:var(--soft)}
.account-tick{width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;display:grid;place-items:center;flex:none;background:var(--paper)}
.account-choice[role=radio] .account-tick{border-radius:50%}
.account-choice[aria-checked=true] .account-tick{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.account-tick svg{width:12px;height:12px;stroke-width:3}
.account-sub{margin-top:16px}
.account-sub>span{display:block;font-size:var(--fs-caption);font-weight:600}
.account-sub small{font-weight:400;color:var(--muted)}
.account-years{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.account-years .account-choice{width:auto;padding:7px 12px;font-size:var(--fs-caption)}
.account-years .account-tick{display:none}
.account-start{display:grid;gap:3px;margin:16px 0 0;padding:14px;border-radius:10px;background:var(--tip);border:1px solid var(--tip-b)}
.account-start .eyebrow{margin:0;color:var(--hl-ink)}
.account-start b{font:600 var(--fs-body)/1.35 var(--display)}
.account-start small{color:var(--muted);font-size:var(--fs-caption)}

/* Sync and delete */
.account-lists{display:grid;gap:10px;margin:14px 0 10px}
.account-lists>div{padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:var(--fs-caption)}
.account-lists>div.stay{background:var(--soft);border-color:transparent}
.account-lists b{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.account-lists b svg{width:15px;height:15px}
.account-lists ul{margin:0;padding-left:20px}
.account-tip{margin:0 0 6px;padding:9px 11px;border-radius:8px;background:var(--tip);border:1px solid var(--tip-b);font-size:var(--fs-caption)}
.account-radio{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:var(--fs-ui);cursor:pointer}
.account-radio input{margin:3px 0 0;accent-color:var(--ink)}
.account-radio small{display:block;color:var(--muted);font-size:var(--fs-caption);margin-top:2px}
.account-danger{background:var(--bad)!important;border-color:var(--bad)!important;color:#fff!important}

/* Account card and menu (sidebar foot) */
.sidebar-foot{position:relative;overflow:visible}
.account-card{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0;padding:6px;margin:-6px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.account-card:hover{background:var(--soft)}
.account-card .sidebar-foot-copy{min-width:0;overflow:hidden;text-overflow:ellipsis}
.account-card-chevron{margin-left:auto;color:var(--muted);display:inline-flex}
.account-card-chevron svg{width:14px;height:14px}
.account-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:40;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:0 12px 32px #0000001f;animation:account-pop .18s cubic-bezier(.2,.8,.2,1)}
.account-menu-head{padding:8px 8px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:var(--fs-caption);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-head small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-caption);margin-top:2px}
.account-menu button{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;padding:8px;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;font-size:var(--fs-caption);text-align:left;cursor:pointer}
.account-menu button:hover,.account-menu button:focus-visible{background:var(--soft);outline:none}
.account-menu button svg{width:15px;height:15px;color:var(--muted)}
.account-menu button.danger,.account-menu button.danger svg{color:var(--bad)}
@keyframes account-pop{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.account-menu,.account-steps i::after{animation:none;transition:none}}
@media(max-width:760px){body.sidebar-collapsed #sidebar:not(.is-peek-open) #nav a.is-locked .lock-badge{display:inline-flex}}
@media(max-width:560px){.account-body{padding:22px 18px 18px}.account-foot .button{flex:1;justify-content:center}}