/* Account controls share the workbook's existing Smithy palette. */
#accountPanel{position:relative;z-index:10;background:var(--dark);color:var(--ink);border-bottom:1px solid var(--line);padding:14px clamp(16px,4vw,48px) 8px;font:inherit;line-height:1.5}
#accountPanel .account-bar{display:flex;align-items:center;gap:24px;max-width:1440px;margin:auto}
#accountPanel .account-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-right:auto;flex-shrink:0}
#accountPanel .account-brand img{display:block;object-fit:contain;width:56px;height:56px}
#accountPanel .account-brand strong{display:block;font-size:15px;letter-spacing:.13em}
#accountPanel .account-brand small{display:block;font-size:9px;letter-spacing:.16em;color:var(--accent);margin-top:3px}
#accountPanel .account-actions,#accountPanel .account-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#accountPanel button,#accountPanel input,#accountPanel select,#accountMenu>summary{font:inherit;font-size:13px;padding:10px 15px;border:1px solid var(--line);border-radius:10px;min-height:44px;background:var(--panel);color:var(--ink);max-width:100%}
#accountPanel button{cursor:pointer;font-weight:650}#accountPanel button:hover,#accountMenu>summary:hover{background:var(--soft);border-color:var(--accent)}
#accountPanel button:disabled{opacity:.5;cursor:wait}#accountPanel .account-primary{background:var(--accent);color:var(--dark);border-color:var(--accent)}#accountPanel .account-primary:hover{background:var(--accent2)}
#accountPanel .account-text{background:none;border:0;color:var(--muted);font-weight:400;padding:6px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px}
#accountPanel label{display:grid;gap:7px;font-size:12px;font-weight:650;min-width:0}#accountPanel input{width:100%;background:var(--bg);font-size:16px}
#accountPanel input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#accountPanel [hidden]{display:none!important}
#accountPanel .account-status-row{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1440px;margin:2px auto 0}
#accountStatus{font-size:12px;color:var(--muted);margin:0;overflow-wrap:anywhere}
#accountMenu{position:relative}#accountMenu>summary{cursor:pointer;list-style:none;white-space:nowrap}#accountMenu>summary::-webkit-details-marker{display:none}
#accountMenu>summary:after{content:'⌄';margin-left:10px;color:var(--accent)}
#accountMenu .account-menu-content{position:absolute;right:0;top:calc(100% + 16px);width:min(420px,calc(100vw - 32px));padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
#accountPanel h2{font-size:22px;margin:0 0 8px}#accountPanel p:not(#accountStatus){font-size:13px;color:var(--muted);margin:8px 0 16px;max-width:85ch;overflow-wrap:anywhere}
#accountPanel .account-fields{display:grid;gap:16px;margin:20px 0}#accountPanel .account-row{margin:12px 0}
#accountNotice:empty{display:none}#accountPanel #accountNotice{margin:0 auto 8px;max-width:1440px;color:var(--accent2)}
#recoveryTools:not([open]){display:none}#recoveryTools{max-width:1440px;margin:12px auto;border-top:1px solid var(--line);padding:20px 0}#recoveryTools>summary{cursor:pointer;color:var(--accent);font-size:14px}#versionList{display:grid;gap:8px;margin-bottom:16px}#backupImport{max-width:420px}
#conflictActions{padding:16px;border:1px solid var(--accent);border-radius:12px}#conflictActions button{margin:4px}
body.account-loading #welcomeView,body.account-loading #appView{pointer-events:none;opacity:.5}
/* One logo in the app header; retain the workbook's words and exercises. */
.welcome .brand-row .smithy-logo{display:none}.welcome{min-height:calc(100vh - 140px);padding-top:28px}.welcome .brand-row{gap:0}
@media(max-width:650px){
 #accountPanel{padding:10px 16px 4px}#accountPanel .account-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
 #accountPanel .account-brand{gap:9px}#accountPanel .account-brand img{width:44px;height:44px}#accountPanel .account-brand strong{font-size:13px}#accountPanel .account-brand small{font-size:8px}
 #accountPanel .account-actions{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
 #accountMenu{grid-row:1;grid-column:2}#accountMenu .account-menu-content{top:calc(100% + 10px);padding:20px}
 #accountPanel .account-status-row{display:block;margin-top:10px}#accountStatus{font-size:11px}#accountPanel #recoveryToggle{font-size:11px;min-height:36px}
 #accountPanel .account-row{align-items:stretch}#accountPanel .account-row button{flex:1 1 auto}
 #accountPanel p:not(#accountStatus){font-size:12px}.welcome{padding:16px}.welcome-card{padding:22px}
}
@media print{#accountPanel{display:none}}

#accountPanel #authNotice:empty{display:none}#accountPanel #authNotice{padding:12px;margin:0 0 16px;border:1px solid var(--accent);border-radius:8px;color:var(--ink);background:var(--soft);font-size:13px}
#accountMenu .account-menu-content{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}