/* 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:var(--r-sm);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:var(--r-xs);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:var(--r-lg);background:var(--paper)}
.glossary-unlock h2{font:400 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:var(--r-xl)}
.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:var(--r-md);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%}
.account-dialog h2{font:400 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{margin:18px 0 4px}
.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%;min-height:40px;font-size:var(--fs-body)}
.account-code{font:400 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:var(--r-md);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:var(--r-sm);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:var(--surface)}
.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:var(--r-md);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}

/* Onboarding */
.account-steps{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 var(--fs-caption)/1.4 var(--sans);text-transform:none;color:var(--muted)}
.account-steps i{position:relative;flex:1;max-width:120px;height:3px;border-radius:var(--r-xs);background:var(--line);overflow:hidden}
.account-steps i::after{content:'';position:absolute;inset:0;width:calc(var(--p)*100%);background:var(--signal);border-radius:var(--r-xs);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.account-notice{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);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{margin:2px 0 0}
.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-strong);border-radius:var(--r-md);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(--ink-2)}
.account-choice[aria-checked=true]{border-color:var(--ink);background:var(--soft)}
.account-tick{width:18px;height:18px;border:1.5px solid var(--line-input);border-radius:var(--r-sm);display:grid;place-items:center;flex:none;background:var(--surface)}
.account-choice[role=radio] .account-tick{border-radius:50%}
.account-choice[aria-checked=true] .account-tick{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.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:var(--r-md);background:var(--tip);border:1px solid var(--tip-b)}
.account-start .eyebrow{margin:0;color:var(--muted)}
.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:var(--r-md);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:var(--r-md);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:var(--r-md);font-size:var(--fs-ui);cursor:pointer}
.account-radio input{margin:2px 0 0}
.account-radio small{display:block;color:var(--muted);font-size:var(--fs-caption);margin-top:2px}

/* 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:var(--r-md);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:var(--r-md);background:var(--paper);box-shadow:var(--e2);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:var(--r-sm);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}}

/* Session 4 (see components.css part 3 for the shell) */
/* Sign-in and create account: photo panel from 960 px (the image arrives in session 7) */
.account-mark{width:32px;height:32px;margin:0 0 16px}
.account-mark.small{width:32px;height:32px;margin-bottom:12px}
.account-dialog .button.account-wide{height:44px}
.account-dialog h2{font:600 22px/1.25 var(--display);letter-spacing:-.01em}
.account-photo{display:none}
@media(min-width:960px){
  .account-dialog.has-photo.is-auth{width:min(880px,calc(100vw - 32px));display:grid;grid-template-columns:1fr 1fr;padding:0}
  .account-dialog.has-photo.is-auth .account-photo{display:block;background:var(--sunken) center/cover no-repeat}
  .account-dialog.has-photo.is-auth .account-body{padding:28px}
}

/* Onboarding options: inset ink ring when chosen; radio dot becomes a 5 px ink ring */
.account-choice{padding:12px 14px;border:1px solid var(--line-strong);background:var(--surface);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.account-choice:hover{border-color:var(--ink)}
.account-choice[aria-checked=true]{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.account-choice[role=radio][aria-checked=true] .account-tick{background:var(--surface);border:5px solid var(--ink);color:transparent}
.account-choice[role=radio][aria-checked=true] .account-tick svg{display:none}
/* Session 5: no dashed borders; the unlock prompt sits on a sunken fill */
.glossary-unlock{border:0;background:var(--sunken);border-radius:var(--r-lg)}

/* ---------- Menu (system: Tooltips, popovers, menus) ----------
   One menu for the account menu and the editor's export menu. It sits here, after the
   account rules, so the shared values win. Surface raised, radius 12, e2, 6 px padding,
   32 px items in 13.5 px with a 16 px muted icon. */
.menu,.account-menu{min-width:220px;padding:6px;border:0;border-radius:var(--r-lg);background:var(--raised);box-shadow:var(--e2);font-size:13.5px}
.menu :is(button,a),.account-menu :is(button,a){display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:32px;min-height:0;padding:0 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:400 13.5px/1 var(--sans);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.menu :is(button,a):hover,.menu :is(button,a):focus-visible,.account-menu :is(button,a):hover,.account-menu :is(button,a):focus-visible{background:var(--hover);outline:none}
.menu :is(button,a) svg,.account-menu :is(button,a) svg{width:16px;height:16px;flex:none;color:var(--muted)}
.menu .danger,.menu .danger svg,.account-menu .danger,.account-menu .danger svg,.account-menu [data-account-delete],.account-menu [data-account-delete] svg{color:var(--danger)}
.menu hr,.account-menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.account-menu-head{padding:8px 10px 10px;margin:0 0 6px;border-bottom:1px solid var(--line);font:600 13.5px/1.3 var(--sans)}
.account-menu-head small{font:400 12px/1.4 var(--sans);color:var(--muted)}
/* Export menu: below the More button, aligned to its right edge */
.export-menu{position:absolute;top:calc(100% + 6px);right:0;left:auto;bottom:auto;z-index:30;width:220px}
.export-menu[hidden]{display:none}
/* Collapsed sidebar: the account menu opens beside the 60 px rail instead of inside it */
@media(min-width:761px){body.sidebar-collapsed #sidebar:not(.is-peek-open) .account-menu{position:fixed;left:68px;right:auto;bottom:12px;width:240px}}
/* Home: the lock beside "All documents" covers the recent list, so rows carry none.
   The Updates card shows its lock at the right edge, centred on the card. */
.home-recent .home-doc.is-locked>.lock-badge{display:none}
a.home-update.is-locked{position:relative;padding-right:52px}
a.home-update.is-locked>.lock-badge{position:absolute;top:50%;right:18px;margin:0;transform:translateY(-50%)}