/* Shared styles for authored procedural 3D avatars. */
[data-avatar3d]{position:relative;display:inline-block;flex-shrink:0;isolation:isolate;vertical-align:middle;line-height:1;overflow:hidden}
[data-avatar3d]>.avatar3d-canvas{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
[data-avatar3d][data-avatar-interactive="true"]{display:inline-flex;flex-direction:column;align-items:center;overflow:visible}
[data-avatar3d][data-avatar-interactive="true"]>.avatar3d-canvas{flex:1 1 auto;height:calc(100% - 34px);touch-action:pan-y;cursor:grab;border-radius:12px}
[data-avatar3d][data-avatar-interactive="true"]>.avatar3d-canvas:active{cursor:grabbing}
.avatar3d-controls{display:flex;flex:0 0 30px;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:4px}
.avatar3d-controls button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;min-height:28px;padding:0;border:1px solid #ddd8cf;border-radius:8px;background:#fff;color:#554a40;cursor:pointer;font:600 11px/1.2 "DM Sans",system-ui,sans-serif}
.avatar3d-controls button:nth-child(2){width:53px}
.avatar3d-controls svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.avatar3d-controls button:focus-visible,.avatar3d-canvas:focus-visible{outline:3px solid #b78a61;outline-offset:3px}
.avatar3d-fallback{position:absolute;inset:0;display:grid;place-items:center;min-width:0;overflow:hidden;border:2px solid;border-radius:inherit;font:800 clamp(12px,2.8vw,28px)/1 "Plus Jakarta Sans",system-ui,sans-serif}
.avatar3d-fallback small{display:none}
[data-avatar-interactive="true"]>.avatar3d-fallback{bottom:34px;border-radius:12px;align-content:center;gap:12px}
[data-avatar-interactive="true"]>.avatar3d-fallback small{display:block;max-width:160px;padding:0 12px;color:#514940;text-align:center;font:400 12px/1.5 "DM Sans",system-ui,sans-serif}
.avatar3d-fallback[hidden],.avatar3d-canvas[hidden],.avatar3d-controls[hidden]{display:none!important}

/* The full figure keeps its proportions beside the existing appearance controls. */
.modal-card:has(.appearance-wizard){display:flex;flex-direction:column}
.modal-card:has(.appearance-wizard)>.modal-header,.modal-card:has(.appearance-wizard)>.modal-footer{flex:0 0 auto}
.modal-card:has(.appearance-wizard)>.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.appearance-wizard .avatar-builder{grid-template-columns:224px minmax(0,1fr);align-items:start;gap:20px}
.appearance-wizard .avatar-preview{min-width:0;min-height:305px;padding:10px 5px}
.appearance-wizard .avatar-preview [data-avatar-interactive="true"]{width:212px!important;height:272px!important;max-width:100%}
.appearance-wizard .avatar-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
@media(max-width:640px){
  .appearance-wizard .avatar-builder{grid-template-columns:minmax(0,1fr);gap:16px}
  .appearance-wizard .avatar-preview{justify-self:center;width:100%;max-width:320px}
  .appearance-wizard .avatar-settings-grid{width:100%;gap:9px}
}
@media(max-width:380px){
  .appearance-wizard .avatar-settings-grid{grid-template-columns:minmax(0,1fr)}
}